使容器在移动设备上可滑动答案

【问题标题】：Make container swipeable on mobile使容器在移动设备上可滑动
【发布时间】：2015-03-19 19:54:47
【问题描述】：

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

$(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 的情况下使该部分可滑动？

【问题讨论】：

您是否考虑过通过检查窗口宽度来区分移动设备和桌面设备之间的功能来完成这项工作？我认为这样做会将功能仅限于桌面，并允许您在移动版本中为其进行任何自定义工作。我敢打赌，对于适合您自己喜好的不同移动宽度，有很多事情需要考虑。
是的，我可以这样做，但仍然需要检查它在移动设备上的外观。我只是想知道我是否有其他选择。

标签： jquery html css jquery-mobile

【解决方案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);
});

【讨论】：