How to get rid of scrollbar inside a div block?

Design help General
1

Hi! So the project (CMS) page on my website is structured into two halves - both with scrolling content. The right half works fine. However, with the left half, I don’t want the scrolling bar in the div block to be visible. I was wondering if there is a way to make it invisible?

Here is the read only link to the page: Webflow - Building Identities

P.S. I’m also open to more efficient ways of structuring this page to achieve the same look/effect.

Thanks in advance for your help!!

Best,
Nethra

2 Likes
2

Strictly speaking, to just make the div’s scrollbar invisible, you can just set it to overflow:hidden—but that makes it impossible to scroll, so I don’t think that’s what you’re after!

My suggestion would be to remove all the positioning and sizing/margins/etc on all your elements, wrap both Section and Work Section in a container, and set that container to display:flex. That will position your columns next to each other and allow them to scroll at the same rate.

Let me know if I misinterpreted your question!

1 Like
4

Hi CB, thank you so much for getting back to me! Your solution definitely made the page cleaner and that’s going to be my backup. But I was wondering if there is a way to make the project name, student name and year (everything in the “sticky project title block”) fixed and allow the project description to scroll beneath that?

read only link here: Webflow - Building Identities

1 Like
5

No problem!

For your question, I would try these steps:

  • Set a fixed height for the navbar (let’s say 100px)
  • Set sticky project title block’s position to Sticky, and the top value to 100px
  • Set a background color for sticky project title block so we can’t see the contents beneath as it scrolls

This isn’t perfect, I’m afraid I don’t have a lot of time right now, but hopefully it will get you on the right track!

1 Like
6

Hey @neths13, I have recorded a short video with Loom visualizing the steps, that @heycorgi has described previously. This should work just fine.

If anything is unclear, let us know and we can help you out.

7

Thank you CB and Julian! Your steps worked like a charm. However, my tutors in the end decided not to go for this option and to stick with the basic one…

However, I’m having an issue with “footer” on this same page and I was hoping you could help me with this: The “back to projects” and “next project” links, which are supposed to be at the bottom of the page are hidden behind the images. I believe this is because the Div Block that houses the video and image containers doesn’t recognise the height of the multiple images inside the image container. How can I essentially push the “back to projects” and “next project” links to the bottom of the page?

Thanks a lot in advance for your help!

Read only link here: Webflow - Building Identities

P.S. this format works fine in pages that have only a video link at the top, and no images: Webflow - Building Identities

1 Like
8

@neths13, it’s great to hear we were able to help you.

Change your Work section from position: absolute; to position: relative. Alternatively, reset position all together. This respects the height of the images.