禁用外部内容在基于触摸的设备上滚动(Twitter引导程序导航栏)

Question

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

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

小提琴: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>

编辑:我检查那个,那个和那个.

编辑:这不起作用.这将停止所有页面滚动.

$('#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()你.

通过这种方式,您可以轻松地确定是否需要可滚动的内容,溢出并不总是按照您的想法运行.

我希望这有帮助.

编辑:您还应该尝试将z-index#nav 设置为高于z-index您的正文/内容容器的#nav .