使用隐藏滚动条滚动
Scrolling with hiding scroll bar
我试图创建一个隐藏滚动条的页面,但您仍然可以滚动或单击链接向下滚动。我可以隐藏滚动条,但我不能100%滚动。Html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="content1">Hello</div>
<div id="content2">Hello2</div>
<div id="content3">Hello3</div>
<div id="content4">Hello4</div>
<div id="links">
<a href="#content1" class="contentLink">link 1</a> |
<a href="#content2" class="contentLink">link 2</a> |
<a href="#content3" class="contentLink">link 3</a> |
<a href="#content4" class="contentLink">link 4</a>
</div>
</div>
</body>
</html>
Css
#container, #content1, #content2, #content3, #content4 {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
z-index: 1;
overflow:hidden}
#content1 { top: 0%; background: yellow; }
#content2 { top: 100%; background: red; }
#content3 { top: 200%; background: orange; }
#content4 { top: 300%; background: purple; }
#links {
position: fixed;
bottom: 10px; left: 10px;
z-index: 2;}
只设置滚动条的样式,而不是元素的样式。
::-webkit-scrollbar,::-webkit-scrollbar-button,::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-thumb,::-webkit-scrollbar-corner,::-webkit-resizer
{opacity:0; }
更多信息请点击此处:http://css-tricks.com/custom-scrollbars-in-webkit/.
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- 在firefox和chrome中的左侧显示iframe滚动条
- jquery:将动画绑定到滚动条位置的更好方法
- 在窗口中添加滚动条
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 使用没有插件的javascript自定义滚动条
- CodeMirror.禁用垂直滚动条
- 在滚动时,在隐藏滚动条和隐藏溢出的同时触发事件
- 可以'无法使滚动条正常工作
- jQuery自动滚动滚动滚动条
- 视差滚动滚动顶部
- 用javascript滚动滚动条或鼠标滚轮后引发事件
- 水平滚动导航条不能正常工作
- 有人可以帮助修复非滚动滚动条
- 滚动/滚动记分牌HTML
- 在滚动导航条后面滑块和银条视差效果不起作用
- 如何添加一个随用户滚动滚动的按钮
- 无限滚动(滚动加载)与 html 表标签
- iPad 滚动 - 滚动期间触发哪些事件