Add a vertical scroll to a really long image within a shorter image block

Site: https://clementine-coral-y4tk.squarespace.com/nearly

I have a long image that I want to have scroll within an image block that is shorter in height than the image. Within the screen shot attached I have the scroll placed on the #block. When I hover over the image and start to the scrolling action, the scroll appears, but will only scroll a very small part of the image. I need the entire image to scroll. Plus I would like for the scroll bar, scroll thumb and scroll track to always be on so that it is clear that the image is scrollable. Any help would be appreciated.

I should note: I am using 7.1, but for this page, I clicked on the Looking for sections built with our classic editor...then selected image.

//----Image with Vertical Scroll
#block-245de0e6717df7e66b72
{
  max-width: 100%;
    padding: 0px;
    height: 600px;
    overflow-y: auto;
  border: 1px solid #ddd;
}

You code can work but you need to start over with a new image block and not use the resize handles to adjust the height.

Let us know how it goes.

Hello. I don't follow what you are saying.

I dug in there and got it! I have styled the scrollbar for this so that it is obvious that is scrolls. Unfortunately, I seem to be having issues on the mobile view. 

I updated the CSS but I'm not seeing it change so I'm obviously not doing something correctly. I want the image to fit within the viewport. I want at least 20px all around the image. Also, the image itself is appearing lower within the image block creating a white cap at the top.

//----Image with Vertical Scroll
#block-245de0e6717df7e66b72
{
  max-width: 100%;
  padding: 0px;
  height: 700px;
  overflow-y: scroll;
  border: 1px solid #ddd;
  @media screen only and (max-width: 640px) {width: 300px!important; height: 300px!important; padding: 20px!important;
}
}
//----Customize Scrollbar Track Color
#block-245de0e6717df7e66b72::-webkit-scrollbar {
 width: 8px;
}
//----Customize Scrollbar Track Color
#block-245de0e6717df7e66b72::-webkit-scrollbar-track {
 background: #f4f4f4;
 border-left:1px solid #ddd
}
//----Customize Scrollbar Thumb Color
#block-245de0e6717df7e66b72::-webkit-scrollbar-thumb {
 background-color: #3E5577;
 border-radius: 1rem;
}

Quote

I updated the CSS but I'm not seeing it change so

You could be running into an issue that SS is having with Custom CSS not updating live, like it used to. After you update your CSS try reloading the site. Does your CSS apply then?

There is another technique that websites use to indicate scrollable content that you may want to consider.

Adding a down arrow that wiggles. I don't have any specific pointers to code but I'm sure I've seen it discussed on the forum several times. A search on the web would probably get you some hits.

Hi,  I am so glad that you got this working! I have not been able to say the same. 

I am working in Squarespace 7.1 and just trying to add a basic vertical scroll to my image. My code is this: 

#block-yui_3_17_2_1_1696542988516_10112 {
  height: 50vh;
  max-width: 80%;
  margin:auto;
  width: 100%;
  overflow-y: scroll;
  filter: drop-shadow(2px 22px 40px rgba(0,0,0,.3));
  
  @media screen and (max-width:767px) {
   height:200px;
  }
}

No matter how many things I have tried, I cannot seem to get a vertical scroll to show up. I have tried the image design as fit and fill,  taken the advice of creedon from above by starting over with a new image block and not resizing it using the handles, and dug deep on stack overflow.  I've tried `overflow: auto` as well as `overflow: scroll` but nothing seems to make a difference. 


The tutorials and resources I found are here:
 

https://www.primitusconsultancy.co.uk/blog/how-to-add-a-full-scrollable-website-page-on-squarespace

https://www.thesquaregenius.com/squarespace-tips/add-a-scrollable-website-image-block-to-squarespace

Has something changed lately that would prevent this VERY simple code from working? I'm completely burnt trying to solve such a simple thing.

I've had the same challenge adding code from tutorials that are 2 / 3 years old and it's not working for me either. Hopefully someone has some tips or ideas they can share? Thank you 

On 10/5/2023 at 11:44 PM, JacoSeth said:

Hi,  I am so glad that you got this working! I have not been able to say the same. 

I am working in Squarespace 7.1 and just trying to add a basic vertical scroll to my image. My code is this: 

#block-yui_3_17_2_1_1696542988516_10112 {
  height: 50vh;
  max-width: 80%;
  margin:auto;
  width: 100%;
  overflow-y: scroll;
  filter: drop-shadow(2px 22px 40px rgba(0,0,0,.3));
  
  @media screen and (max-width:767px) {
   height:200px;
  }
}

No matter how many things I have tried, I cannot seem to get a vertical scroll to show up. I have tried the image design as fit and fill,  taken the advice of creedon from above by starting over with a new image block and not resizing it using the handles, and dug deep on stack overflow.  I've tried `overflow: auto` as well as `overflow: scroll` but nothing seems to make a difference. 


The tutorials and resources I found are here:
 

https://www.primitusconsultancy.co.uk/blog/how-to-add-a-full-scrollable-website-page-on-squarespace

 

https://www.thesquaregenius.com/squarespace-tips/add-a-scrollable-website-image-block-to-squarespace

Has something changed lately that would prevent this VERY simple code from working? I'm completely burnt trying to solve such a simple thing.

Jaco - I just got this to work by adding a classic editor block, rather than a new one. Here's a screen shot so you can see what I mean. When you add a new block scroll all the way to the bottom, then add your image and update the code ID. Hopefully that works for you too!