jquery - 使容器在移动设备上可滑动

Question

我有一个容器，里面有图像，它的宽度大于文档窗口的宽度。我添加了这段代码

$(window).on('load', function(){
        function loop_left(){
            $isotope_container.stop().animate({left:'+=50'}, 500, 'linear', loop_left);
        }  
        function loop_right(){
            $isotope_container.stop().animate({left:'-=50'}, 500, 'linear', loop_right);
        }        
        function stop(){
            $isotope_container.stop();
        }
        if ($isotope_container.width()>$(window).width()) {
            $isotope_container.parent().prepend('<div class="left_scroll"><div class="inner"></div></div>');
            $isotope_container.parent().append('<div class="right_scroll"><div class="inner"></div></div>');

            $isotope_container.parent().find('.left_scroll').hover(loop_left, stop);
            $isotope_container.parent().find('.right_scroll').hover(loop_right, stop);
        }
});

它添加了一个 div，当您将鼠标悬停在它们上面时，容器会向左和向右移动。

现在，这在桌面上很酷，但是当我在移动设备上时，这就不那么实用了。我正在查看移动 jquery，但是当我添加它时，包含的 css 改变了我网站的外观，所以我不得不删除它。

是否可以在没有 mobile.js 的情况下使该部分可滑动？

Answer 1

我相信最简单的方法是检查窗口宽度并根据需要进行响应式修改(移动设备与桌面设备)。我强烈建议您为此实现编写移动优先代码。根据您站点中一切的工作方式，您可能必须围绕它进行自定义构建，因此我相信将以下功能添加到您的代码中将简化该过程(非常简单但可高度扩展):

$(document).ready(function() {
    // Store the references outside the event handler to optimize
    var $window = $(window);
    var $pane = $('#pane1');
    var customWidth = 400; // change to your needs
    var device = true; // default should be mobile, thus true

    function checkWidth() {
        if ($window.width() < customWidth) {
            //if the window is smaller than the desired width, then return true.
            return true;
        }
        else {
            //if the window is smaller than the desired width, then return false.
            return false;
        }
    }
    // Execute on load
    device = checkWidth();
    // SUGGESTION: Bind event listener to your custom behavior. 
    // If the above function 'resized' your screen instead, you could bind it to
    // the resize function by having it return a desired width instead.
    $(window).resize(checkWidth);
});