如何滚动菜单，而不在后台滚动页面内容？

Question

在我的网站上，右侧有一个菜单。当我向下滚动菜单并向下滚动时，背景页面也会滚动。

我希望后台页面不滚动。如何做到这一点？

这是我网站的一个页面，点击右边的菜单：

https://www.s1biose.com/recette

Answer 1

您可以通过多种方式禁用滚动：

使用 CSS：

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

这将禁用滚动并将您带到页面顶部。

或者，您可以使用 JavaScript (jQuery) 来：

$(document).ready(function(){
  $(".navbar-toggle-second[aria-expanded='false']").click(function(e) {
    e.preventDefault();
    $("body").css("overflow", "hidden");
  });

  $(".navbar-toggle-second[aria-expanded='true']").click(function(e) {
    e.preventDefault();
    $("body").css("overflow", "auto");
  });
});

有关更多信息，请参阅：

How to programmatically disable page scrolling with jQuery