html scroll bar beautify and cancel
August 22, 2022
In the browser, if there are too many pages, there will be two scroll bars, horizontal and vertical, the default style is ugly, you can adjust it according to the style of the page.
1 Cancel Scroll Bar
You can cancel the scroll bar display in the following two ways:
1.1 Use Overflow Inside CSS to Unscroll
<style>
body{
/* 去掉水平滚动条 */
overflow-x: hidden;
/* 去掉竖直滚动条 */
overflow-y: hidden;
/* 去掉水平滚动条，显示竖直滚动条 */
overflow-x:hidden;overflow-y:scroll;
/* 水平和竖直方向滚动条全部隐藏 */
overflow:hidden;
}
1.2 On the body tag, use scroll="no" to hide the horizontal and vertical scroll bars
<!-- 表示全部隐藏 -->
<body scroll="no">
Scroll bars have the following four properties:
overflow-x : visible | auto | hidden | scroll
Visible: does not cut content and does not add scroll bars.
Auto: Cuts content and adds scroll bars when needed.
Hidden: Does not display content higher than the height of the object.
Scroll: Always displays the longitudinal scroll bar.
2 Beautify Scroll Bar
/* ::-webkit-scrollbar仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用 */
/* 整个滚动条 */
::-webkit-scrollbar {}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button {}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {}
/* 滚动条轨道 */
::-webkit-scrollbar-track {}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {}
2.1 The Instance Of Beautify
2.1.1 CSS Code
<style>
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
background-color: #55abe6;
}
/* 整个滚动条 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
border-radius: 6px;
background: rgba(0, 0, 0, .1);
}
</style>
2.1.2 Screenshot In the Browser
