Question

我想在我的应用中添加触摸滚动功能。我已经使用鼠标滚轮滚动，拖动，点击等。我（有点）设法使用名为touch-scroll的插件让滚动在iPad上工作。

问题在于，当我添加代码时，div变得可滚动，但又回到顶部（弹性效果）。我想知道如何让它正确滚动。

注意 我尝试过iscroll-4，但它对我不起作用。

注意 我也在使用http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery中的网站模板。

初始化插件：

<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>

我的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);
});

Answer 1

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

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

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

javascript滚动触摸滚动

1 个答案: