How to delete scroll bar in css

css Delete scroll bar: 1. Calculate the width of the scroll bar, set the position of the scroll bar through positioning, and hide the scroll bar. 2. Use the "::-webkit-scrollbar" selector or the "overflow" attribute to delete the scroll bar.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to delete the scroll bar in css 1: Calculate the width of the scroll bar and hide it

In the sidebar of this site, you can see the front-end daily report There is no scroll bar for that piece of content, but the content can be scrolled by moving the mouse over it. What technology is this? In fact, I just hide the scroll bar through positioning. Demonstration Here is a simplified version of the code

<div class="outer-container">
    <div class="inner-container">
    ......
    </div>
</div>

.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}

Demo address: http://caibaojian.com/demo/2018/3/scroll2.html

This code is clever has moved 17 pixels to the right, which is exactly equal to the width of the scroll bar. This value was obtained by manual debugging. No problem found in chrome and IE.

Css method 2 to delete scroll bar: use ::-webkit-scrollbar selector or overflows attribute

At the same time, the article also shared a method CSS method to hide scroll bars, but this method is not compatible with IE and can be used on mobile devices. That is the pseudo-object selector of the custom scroll bar::-webkit-scrollbar. For details, please see the previous article: CSS3 custom webkit scroll bar style chrome and Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

Demo address: http://caibaojian.com/demo/2018/3/scroll4.html

(Learning video sharing: css Video tutorial)

The above is the detailed content of How to delete scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!