Streaming live at 10am (PST)

Overflow: scroll | White borders at the bottom and right

Hello all,

I found a bug, by setting my divs overflow setting to scroll. You can see what happens in the image below. There is a big white border, that shouldn´t be there. Any ideas? I tried a lot of stuff, but nothing helps… need to solve the problem
:face_with_raised_eyebrow: Thanks community, Nils
33


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Not a bug, this is expected.

overflow:scroll means you’re force-activating the scroll on the element. Hence the apparition of… scroll bars on the right and bottom.

if you want to be able to scroll inside of an element but don’t want the scroll bars, you’re going to need a bit of CSS custom code, such as:

.container {
    -ms-overflow-style: none;  // IE 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Hi Vincent, okay. I thought, that the scroll bars are only getting visible, if the space of the div is not enough to show it´s content inside.

Thank you for the code. Unfortunately it didn´t work. Am I doing something wrong?
I copied it into the pages settings before </body> tag and replaced the class name of the container…

.scrolldiv {
    -ms-overflow-style: none;  // IE 10+
    scrollbar-width: none;  // Firefox
}
.scrolldiv::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

I´m using Chrome.

That would be overflow:auto

Try this:

<style>

.scrolldiv::-webkit-scrollbar { 
    display: none;
}

.scrolldiv {
    -ms-overflow-style: none;  /* IE 10+ */
    scrollbar-width: none;  /* Firefox */
    
}

</style>
1 Like

Thank you @vincent. This works for me perfect.

1 Like

Thanks for coming back to report!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.