How to add a full scrollable website page on Squarespace

This tutorial will show you how to add a full scrollable website page on Squarespace. You may need the feature of a scrollable website page to show case your client portfollio or Squarespace templates for sale.

A useful tool you can use to grab the full webpage screen capture is Go full page extension (https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl). Other options could be sample/mock up pages created on canva, Adobe XD.

Another useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

This will work on both Squarespace 7.1 and 7.0

Complexity: Easy

---

Step 1

Obtain a full page screen capture of the website and upload the image on Squarespace

---

Step 2

Add an image block to where the full page screen capture page is to be and add the image.

---

Step 3

Go to Design > Custom CSS and paste the code

// Scrollable Webpage
#BLOCK-ID {
  height: 350px;
  max-width: 80%;
  margin:auto;
  width: 100%;
  overflow-y:scroll;
  overflow-x:hidden;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,.3));
  
  @media screen and (max-width:767px) {
   height:200px;
  }
}

//Customize the scrollbar

::-webkit-scrollbar {
    width: 3px; /* Scrollbar Thickness */
    height:15px;
}
::-webkit-scrollbar-thumb {
    background: #22514A; 
}
::-webkit-scrollbar-track {
    background: #ffffff; /* Background Color */
}

---

Replace the #BLOCKID’s with the BLOCKID’s, for this example the BLOCKID’s is ‘#block-6c86a25d0b91bb9aaab2’.

// Scrollable Webpage
#block-6c86a25d0b91bb9aaab2 {
  height: 350px;
  max-width: 80%;
  margin:auto;
  width: 100%;
  overflow-y:scroll;
  overflow-x:hidden;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,.3));
  
  @media screen and (max-width:767px) {
   height:200px;
  }
}

//Customize the scrollbar

::-webkit-scrollbar {
    width: 3px; /* Scrollbar Thickness */
    height:15px;
}
::-webkit-scrollbar-thumb {
    background: #22514A; 
}
::-webkit-scrollbar-track {
    background: #ffffff; /* Background Color */
}

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.