标签:
1.在CSS文件加上一下代码:
::-webkit-scrollbar {
-webkit-appearance: none; /*可去除系统默认的样式*/
width: 7px; /*滚动条宽度*/
}
::-webkit-scrollbar-thumb { /*当焦点不在当前区域滑块的状态*/
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
2.模拟滚动条效果
function touchScroll(id) {
if (isTouchDevice()) {
var el = document.getElementById(id);
var scrollStartPos = 0;
document.getElementById(id).addEventListener("touchstart",
function(event) {
scrollStartPos = this.scrollTop + event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove",
function(event) {
this.scrollTop = scrollStartPos - event.touches[0].pageY;
event.preventDefault();
},false);
}
}
touchScroll("id"); //调用需要overflow:auto的id即可。
mobile safari下 overflow:auto无效的解决方法
标签:
原文地址:http://www.cnblogs.com/ruijinyuan/p/5045655.html