隐藏+滚动

移动页面: 即隐藏滚动条 又保证可以滚动: .element::-webkit-scrollbar {display:none}

如: 最前面的 element 必须改 否则无效. #filenameDiv::-webkit-scrollbar {display:none}

visible: 上下拖拉可见. 不可滚动. hidden: 上下拖拉不可见. 不可滚动 scroll: 不可上下拖拉 可滚动.

div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}

强制隐藏滚动条

html { overflow: hidden; }  ✔︎ 强制隐藏滚动条. 不知为什么会有滚动条… 

其他浏览器也要实现这个功能: 变通办法 在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>




.outer-container,.content {
    width: 200px; height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}

overflow: hidden 虽然隐藏了滚动条,但是无法滚动….

伪对象选择器 ::-webkit-scrollbar

webkit-scrollbar 介绍

overflow: 当内容溢出元素框时候发生的事情

visible 默认值. 多出的内容会呈现在元素框外面.

overflow: hidden内容被修剪. 溢出的内容 不可见. overflow: scroll 内容被修剪. 溢出内容 可以上下左右滚动来查看剩余内容. overflow: auto 如果内容被修剪, 会显示滚动条 查看剩余内容.声明决策将依赖于客户端,优先使用scroll。 overflow-x: overflow-y: auto

<div style="width:60px; height:40px; 
background-color: red; 
overflow: scroll;">
哈哈哈哈哈哈哈哈哈 
</div>

Webkit 浏览器CSS滚动条设置.

主要有下面7个属性: . ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 . ::-webkit-scrollbar-button 滚动条两端的按钮 . ::-webkit-scrollbar-track 外层轨道 . ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) . ::-webkit-scrollbar-thumb 拖动条,滑块 . ::-webkit-scrollbar-corner 边角 . ::-webkit-resizer 定义右下角拖动块的样式

iScroll

iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

内滚动布局

$(function(){                           
 $("#filenameDiv").scroll(function() {      
    var offset = $(this).offset();      
    $("#filenameDiv-Btnes").offset(offset);  
  }) ;                             
});

这个会让 上方的排序栏目固定. 下面的 文件列表可以滚动. 但是滚动后内容会重叠….

一般滚动是 整个页面的…

有时候要 某个div 滚动…

既然是内滚动条. 就必须干掉 浏览器原生的 html 滚动条 html { overflow: hidden; }

然后让一个div滚动就可以了..