javascript - 在基于触摸的设备上禁用外部内容的滚动(Twitter Bootstrap 导航栏)

Question

我使用 twitter bootstrap 3。我添加了固定的顶部导航栏。我在导航栏上有下拉按钮。当用户单击按钮时，将打开一个下拉菜单。对于桌面用户来说没问题。但对于移动用户，当用户向下滚动下 zipper 接时，后面的页面也会滚动。

是否可以在用户滚动下 zipper 接时禁用后台页面滚动？

fiddle :http://jsfiddle.net/mavent/2g5Uc/1/

当用户触摸下拉部分并像绿色箭头一样触摸时，背景页面像这个屏幕截图中的红色箭头一样滚动:

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation">
    <div class="navbar-header" style="text-align:center;">
     .......
    </div>

编辑:我检查了that , that和 that .

编辑: 这是行不通的。这将停止所有页面滚动。

$('#my_navbar_div').bind('touchmove', function(event)
{
    event.preventDefault();
});

这行不通。没有改变任何行为:

$('#my_navbar_div').hover(function() {
    $(document).bind('touchstart touchmove',function(){
        $("body").css("overflow","hidden");
    });
}, function() {
    $(document).unbind('touchstart touchmove');
});

Answer 1

要更好地控制滚动功能，您可以尝试以下操作。

禁用所有滚动

//create the exception variable.
var Scrollable = '.scrollable';

    //prevent all scrolling.
    $(document).on('touchmove', function(e) {
        e.preventDefault();
    });

    $('body').on('touchstart', Scrollable, function(e) {
        if (e.currentTarget.scrollTop === 0) {
            e.currentTarget.scrollTop = 1;
        } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
            e.currentTarget.scrollTop -= 1;
        }
    });

下面是允许滚动的异常:

    // Stops preventDefault from being called on document if it sees a scrollable div
    $('body').on('touchmove', Scrollable, function(e) {
        e.stopPropagation();
    });

您想要做的是在您希望滚动的每个元素上设置一个名为 scrollable 的类。您当然可以随时调用 stopPropagation()。

这样你就可以很容易地决定你是否想要滚动或不滚动，溢出并不总是像你想象的那样工作。

希望对您有所帮助。

编辑:您还应该尝试将您的#nav 的z-index 设置得比您 body 的z-index 高/内容容器。