
隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari。
如下demo:
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
<html>
<head>
<style>
.element,
.outer-container {
width: 200px;
height: 200px;
} .outer-container {
/* border: 5px solid purple; */
position: relative;
overflow: hidden;
} .inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
} .inner-container::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="element">
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
<div>Content 1</div>
</div>
</div>
</div>
</body>
</html>
参见:https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/