mobile safari下 overflow:auto無效的解決方法

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便可。