javascript滚动触摸滚动

我想将触摸滚动添加到我的应用程序中。我已经使用鼠标滚轮、拖动、单击等方式进行了滚动。我已经（某种程度上）使用一个名为的插件在iPad上实现了滚动

问题是，当我添加代码时，div会变得有点可滚动，但会返回顶部（弹性效果）。我想知道如何才能使它正确滚动

注意我尝试了iscroll-4，但它对我无效

注意我也在使用来自的网站模板

初始化插件：

<script src="https://github.com/neave/touch-scroll/raw/master/touch-scroll.min.js"></script>
<script>
    $(document).ready(function() {
        if (!!('ontouchstart' in window)) {
            $('#customScrollBox .container').touchScroll();
        }
    });
</script> 

$（文档）.ready（函数（）{
如果（！！（“窗口中的ontouchstart”）{
$（'#customScrollBox.container'）.touchScroll（）；
}
});

我的Javascript

$(window).load(function() {
    $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
    ImageViewMode($toolbar.data("imageViewMode"));
    //cache vars
    $customScrollBox=$("#customScrollBox");
    $customScrollBox_container=$("#customScrollBox .container");
    $customScrollBox_content=$("#customScrollBox .content");
    $dragger_container=$("#dragger_container");
    $dragger=$("#dragger");

    CustomScroller();

    function CustomScroller(){
        outerMargin=0;
        innerMargin=20;
        $customScrollBox.height($(window).height()-outerMargin);
        $dragger_container.height($(window).height()-innerMargin);
        visibleHeight=$(window).height()-outerMargin;
        if($customScrollBox_container.height()>visibleHeight){ //custom scroll depends on content height
            $dragger_container,$dragger.css("display","block");
            totalContent=$customScrollBox_content.height();
            draggerContainerHeight=$(window).height()-innerMargin;
            animSpeed=400; //animation speed
            easeType="easeOutCirc"; //easing type
            bottomSpace=1.05; //bottom scrolling space
            targY=0;
            draggerHeight=$dragger.height();
            $dragger.draggable({ 
                axis: "y", 
                containment: "parent", 
                drag: function(event, ui) {
                    Scroll();
                }, 
                stop: function(event, ui) {
                    DraggerOut();
                }
            });

            //scrollbar click
            $dragger_container.click(function(e) {
                var mouseCoord=(e.pageY - $(this).offset().top);
                var targetPos=mouseCoord+$dragger.height();
                if(targetPos<draggerContainerHeight){
                    $dragger.css("top",mouseCoord);
                    Scroll();
                } else {
                    $dragger.css("top",draggerContainerHeight-$dragger.height());
                    Scroll();
                }
            });

            //mousewheel
            $(function($) {
                $customScrollBox.bind("mousewheel", function(event, delta) {
                    vel = Math.abs(delta*10);
                    $dragger.css("top", $dragger.position().top-(delta*vel));
                    Scroll();
                    if($dragger.position().top<0){
                        $dragger.css("top", 0);
                        $customScrollBox_container.stop();
                        Scroll();
                    }
                    if($dragger.position().top>draggerContainerHeight-$dragger.height()){
                        $dragger.css("top", draggerContainerHeight-$dragger.height());
                        $customScrollBox_container.stop();
                        Scroll();
                    }
                    return false;
                });
            });

            function Scroll(){
                var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
                var draggerY=$dragger.position().top;
                targY=-draggerY*scrollAmount;
                var thePos=$customScrollBox_container.position().top-targY;
                $customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
            }

            //dragger hover
            $dragger.mouseup(function(){
                DraggerOut();
            }).mousedown(function(){
                DraggerOver();
            });

            function DraggerOver(){
                $dragger.css("background", "url(round_custom_scrollbar_bg_over.png)");
            }

            function DraggerOut(){
                $dragger.css("background", "url(round_custom_scrollbar_bg.png)");
            }
        } else { //hide custom scrollbar if content is short
            $dragger,$dragger_container.css("display","none");
        }
    }

    //resize browser window functions
    $(window).resize(function() {
        FullScreenBackground("#bgimg"); //scale bg image
        $dragger.css("top",0); //reset content scroll
        $customScrollBox_container.css("top",0);
        $customScrollBox.unbind("mousewheel");
        CustomScroller();
    });

    LargeImageLoad($bgimg);
});

$（窗口）.load（函数（）{
$toolbar.data（“imageViewMode”，$defaultViewMode）；//默认视图模式
ImageViewMode（$toolbar.data（“ImageViewMode”））；
//缓存变量
$customScrollBox=$（“#customScrollBox”）；
$customScrollBox_container=$（“#customScrollBox.container”）；
$customScrollBox_content=$（“#customScrollBox.content”）；
$dragger_container=$（“#dragger_container”）；
$dragger=$（“#dragger”）；
自定义滚动条（）；
函数CustomScroller（）{
外精蛋白=0；
内页边距=20；
$customScrollBox.height（$（窗口）.height（）-outerMargin）；
$dragger_container.height（$（window.height（）-innerMargin）；
visibleHeight=$（窗口）.height（）-outerMargin；
如果（$customScrollBox_container.height（）>visibleHeight）{//自定义滚动取决于内容高度
$dragger_container，$dragger.css（“显示”、“块”）；
totalContent=$customScrollBox_content.height（）；
draggerContainerHeight=$（window）.height（）-innerMargin；
animSpeed=400；//动画速度
easeType=“easeOutCirc”；//缓解类型
bottomSpace=1.05；//底部滚动空间
targY=0；
dragger高度=$dragger.height（）；
$dragger.draggable（{
轴：“y”，
遏制：“家长”，
拖动：函数（事件、ui）{
滚动（）；
}, 
停止：功能（事件、用户界面）{
拖拽（）；
}
});
//滚动条单击
$dragger_容器。单击（函数（e）{
var mouseCoord=（e.pageY-$（this.offset（）.top）；
var targetPos=mouseCoord+$dragger.height（）；
如果（targetPos您是否尝试使用纯css解决方案？iOS设备不会显示滚动条，因此您可以将可滚动元素的css更新为：

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

您可以调整可滚动元素的高度以调整可滚动区域
是否尝试使用纯css解决方案？iOS设备不会显示滚动条，因此您可以将可滚动元素的css更新为：

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

您可以调整可滚动元素的高度以调整可滚动区域