码迷,mamicode.com
首页 > 其他好文 > 详细

mobile safari下 overflow:auto无效的解决方法

时间:2015-12-14 18:39:10      阅读:3301      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!