Hidden scrollbars of CSS
We often see this in front end development. The easiest thing to think of is to add an iscroll plugin, but now CSS can do this as well. Let’s take a look at using CSS to hide scrollbars.
The scrollbar can be hidden using the pseudo-object selector for custom scrollbars ::-webkit-scrollbar setting.
<html>
<head>
<style type="text/css">
.img {
height: 512px;
background: url(../assets/yay.jpg) no-repeat center 0;
background-size: 512px 512px;
}
</style>
</head>
<body>
<div class="img" />
<div class="img" />
</body>
</html>
Copy the code
<html>
<head>
<style type="text/css">
.layout {
height: 100vh;
overflow-y: scroll;
}
.layout::-webkit-scrollbar {
display: none;
}
.img {
height: 512px;
background: url(../assets/yay.jpg) no-repeat center 0;
background-size: 512px 512px;
}
</style>
</head>
<body>
<div class="layout">
<div class="img" />
<div class="img" />
</div>
</body>
</html>
Copy the code
Compatible with all browsers
<html>
<head>
<style type="text/css">
.layout::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.layout {
height: 100vh;
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
.img {
height: 512px;
background: url(../assets/yay.jpg) no-repeat center 0;
background-size: 512px 512px;
}
</style>
</head>
<body>
<div class="layout">
<div class="img" />
<div class="img" />
</div>
</body>
</html>
Copy the codeFiner control.
/* The whole part of the scroll bar */
html::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Scroll bar track */
html::-webkit-scrollbar-track {
background: #f0f2f5;
border-radius: 2px;
}
/* The little box inside the scrollbar */
html::-webkit-scrollbar-thumb {
background: # 333333;
border-radius: 10px;
}
html::-webkit-scrollbar-thumb:hover {
background: # 222222;
}
Copy the codeThe last
Above is how CSS hide scrollbar method, welcome technical exchange. Your support is my motivation ~