Clever Geek Handbook

Overflow: scrolling; CSS adding a border to the edge of the page?

I have a div with the following css:

overflow: scroll;

However, it looks like a border is added by the browser (?) Where the scrollbar should appear if it was visible (even if it isn't visible). I have checked the css inside dev tools and cannot find a link to this style. How do I hide this scroll style?

Here's an example screenshot - the red arrow points to the right edge of the screen, I didn't add this style. It disappears if I remove the style rule overflow: scroll;

.

enter image description here

Note I can see this behavior in both Chrome and Safari (latest versions of both).

+3


source to share


1 answer


Sets the overflow property for scrolling content clips in size. This prevents the contents of the container from exceeding horizontal and vertical boundaries. It also places the scrollbar horizontally and vertically, whether you need it or not.

Scroll bars are displayed:

<div id="div1">
  Content
</div>

#div1 {
    overflow:scroll;
}

The "auto" value will display the scroll bar vertically, horizontally, or on both sides as needed.

Change your CSS to:



#div1 {
    overflow:auto;
}

You can also set the overflow property to horizontal or vertical only. You can use this automatically if you want to ensure that the vertical scrollbar cannot be.

Change your CSS to:



#div1 {
    overflow-x:scroll; /* Set the overflow horizontal property to clip the content 
and display a horizontal scroll bar. */
} 
    overflow-y:hidden; /* Set the overflow vertical property to clip the content, 
hide the vertical scroll bar and any content outside of the top/bottom borders. */
}
+3


source






More articles:


All Articles