How to hide scroll bar style in css

In web design, hiding scroll bars is a common style requirement. When the web page content is relatively simple, or it is necessary to achieve a sliding effect similar to the APP interface, hiding the scroll bar can better enhance the user experience. Through CSS technology, we can easily customize the scroll bar style.

1. How to hide the scroll bar

1. Use CSS code

/Hide the scroll bar/
::-webkit-scrollbar {

display: none;

}

In this CSS code, by setting the "display: none" attribute, we can stop the scroll bar from being displayed. However, this method is only effective for browsers with WebKit core (such as Chrome, Safari, etc.), and there are some compatibility issues.

2. Use JavaScript code

/Hide scroll bar/
window.onload=function() {

//隐藏滚动条
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden'; //针对火狐浏览器

//禁止滚动条滚动
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';

}

Through JavaScript code, we can use "document.documentElement.style.overflow='hidden'" to hide the browser scroll bar. However, this method must load all pages before it can take effect, and will affect the layout of some websites.

3. Use plug-in technology

For some web designers who are not familiar with technologies such as CSS or JavaScript, you can consider using third-party scroll bar plug-ins, such as iScroll, perfect-scrollbar, nicescroll, etc. . These plug-ins can hide scroll bars and beautify the sliding effect by adding specific CSS or JavaScript code.

2. Methods to beautify scroll bars

In addition to hiding scroll bars, we can also beautify scroll bars through CSS technology. In the CSS3 specification, new scroll bar style attributes are provided to achieve richer scroll bar effects.

1. Change the color of the scroll bar

/Change the color of the scroll bar/
::-webkit-scrollbar {

width: 10px;
height: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

In this CSS code, by setting the "webkit-scrollbar" attribute, we can define the scroll bar width, height and background color. By setting the "webkit-scrollbar-thumb" property, we can define the color and border style of the mouse operation area of ​​the scroll bar.

2. Change the shape of the scroll bar

/Change the shape of the scroll bar/
/Vertical scroll bar/
: :-webkit-scrollbar {

width: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

/Horizontal scroll bar /
::-webkit-scrollbar {

height: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

The above two pieces of CSS code define styles for vertical and horizontal scroll bars respectively. By changing the value of the "width" or "height" attribute, we can change the width and height of the scroll bar. At the same time, by setting the value of the "border-radius" attribute, we can also change the border style of the scroll bar.

3. Example demonstration

Through CSS technology, we can achieve the goal of hiding the scroll bar and beautifying the scrolling effect. The following is a simple example demonstration that shows how to use CSS code to achieve the effects of "hide scroll bar" and "change scroll bar shape".

HTML code:

<div class="content">
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
</div>

CSS code:

/Hide scroll bar/
.content::-webkit-scrollbar {

display: none;

}

/Change scroll bar shape /
.content::-webkit-scrollbar {

width: 10px;
background-color: #F5F5F5;

}

.content::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

.container {

width: 400px;
height: 300px;
overflow: auto;

}

.content p {

font-size: 18px;
line-height: 30px;
text-indent: 2em;
color: #666666;

}

In this example demonstration, we set "overflow: auto " attribute to achieve the scrolling effect when the web page content exceeds the height of the container. At the same time, we also achieved the effect of hiding the scroll bar and changing the shape of the scroll bar by setting the values ​​of the "::-webkit-scrollbar" and "::-webkit-scrollbar-thumb" properties.

Summary:

Scroll bar is one of the common interactive elements in web pages, which can help users better browse and view web page content. Through CSS technology, we can customize the style of the scroll bar to better enhance the user experience. In actual project development, in addition to the methods in the above example demonstrations, we can also achieve more colorful scroll bar effects by adding background images and dynamically changing scroll bar styles.

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