javascript - 手机中的CSS滚动问题

Question

我一直在尝试通过在我的网站中滚动来解决这个奇怪的问题。在台式计算机上查看时，滚动效果很好。但是，它不适用于手机。我需要使用一些 javascript 来解决这个问题吗？或者，是否可以仅使用 CSS 来完成。

这是我的 CSS 片段:

#popup-div{
   height: 100%;
   overflow:scroll;
}

Answer 1

function isTouchDevice(){
        try{
            document.createEvent("TouchEvent");
            return true;
        }catch(e){
            return false;
        }
}

    function touchScroll(id){
        if(isTouchDevice()){ //if touch events exist...
            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);
        }
    }

    //On page load
    touchScroll('popup-div');

克里斯展示了一个最好的例子 http://chrismbarr.github.io/TouchScroll/