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

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