我使用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');
});
解决方法
要更好地控制滚动功能,可以尝试以下操作.
禁用所有滚动：
//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',function(e) {
e.stopPropagation();
});
你想要做的是,在你想要滚动的每个元素上设置一个名为scrollable的类.你当然可以随时调用stopPropagation().
通过这种方式,您可以轻松地确定是否需要可滚动的内容,溢出并不总是按照您的想法运行.
我希望这有帮助.
编辑：您还应该尝试将#nav的z-index设置为高于正文/内容容器的z-index.
