css How to add long scrolling image (screenshot)

Hey Guys, 

I'm looking for a way to best present my portfolio websites by adding a scrolling image block. See example attached. 

Does anyone know how to do this? 

Thanks, 

Tasha 

Hi. Can you upload it to Youtube/Video then share url again?

Sorry it's taken so long - but here is the video link - 

16 hours ago, TashaDobie said:

Sorry it's taken so long - but here is the video link - 

 

 

You will use this on standard page or product page?

@tuanphanOn a standard page

Following 🙂

sure, you can do this. the key is to control the image container's height and then set its overflow to auto.

first way, upload an image to somewhere on your site and get the url for it. (maybe have an unlisted or disabled gallery page).  now add a code block and put the following code in. this is for 900px high, but edit as you see fit.

<div style="width:100%;height:900px;overflow:auto;">
  <img src="https://your-very-tall-image-url-here" width="100%" />
</div>

This is probably quite a good way if your image isn't hosted on squarespace, or you want a lot of control over the embedding because you can put whatever you want in it.

second way is to put an inline image in as you normally would, then find out the block id for that image. You can do this easily with the Squarespace Id Finder chrome extension, otherwise you need to find the block id in the page source. add the following css (either to your custom css in the design section, or wrap it in <style> blocks and put it in a code block on the page).

#block-yui_3_17_2_1_1628966659965_3735 {
  height:400px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
}
 

put your own block id in obviously. change the height to whatever you want. This way is neat because the upload of the image is easier, as its right in the page. got to find the block id though. You might want to think about whether this is a good interaction on mobile though. might end up with double scrollbars. if that's the case then wrap whatever css you put in inside a media query so it only happens on wider screens

@media screen and (min-size:768px) {
  #block-yui_3_17_2_1_1628966659965_3735 {
    height:400px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0;
  }
}

here's an example: