Question

我正在开发一个简单的响应式菜单。一切都工作得很好，除了当菜单更大并滚动到它的底部时，它将继续滚动它下面的所有内容，这是它自己的页面。是否可以删除它。

您可以在this链接上进行测试。

如果您使用手机打开，菜单将滚动到底部，之后它将继续骂背景，这是我的身体，所以我试图阻止它。

谢谢

Answer 1

在css中创建类disableScroll .disableScroll {overflow：hidden}

当用户点击＆＃39;＃menu-toggle-wrapper＆＃39;添加课程＆＃39; disableScroll＆＃39;到body元素，这会禁用背景滚动，然后删除＆＃39; disableScroll＆＃39;用户点击导航链接或＆＃39;＃menu-toggle-wrapper＆＃39;启用页面滚动

Answer 2

你应该检查这个插件。

https://github.com/jquery/jquery-mousewheel

它可以防止目标元素下的鼠标滚轮事件。

$(function() {

   $("#element").mousewheel(function(event, delta) {
      event.preventDefault();
   });

});

Answer 3

您应该使用javascript阻止正文或html滚动。检查一下 - ＆gt; copied from this link

 // lock scroll position, but retain settings for later
  var scrollPosition = [
    self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
  ];
  var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
  html.data('scroll-position', scrollPosition);
  html.data('previous-overflow', html.css('overflow'));
  html.css('overflow', 'hidden');
  window.scrollTo(scrollPosition[0], scrollPosition[1]);


  // un-lock scroll position
  var html = jQuery('html');
  var scrollPosition = html.data('scroll-position');
  html.css('overflow', html.data('previous-overflow'));
  window.scrollTo(scrollPosition[0], scrollPosition[1])

如何删除响应式菜单下方的背景滚动

3 个答案: