Question

在我们的移动网站上，当单击右上角的汉堡包图标时，我希望下拉菜单可以显示并且可滚动，而无需背景滚动。当您单击菜单图标时，我已经编写了JavaScript来将正文设置为fixed，但是，这导致网站跳到页面顶部。这不是我想要的，我希望它是这样，以便当用户单击菜单按钮时，背景页面保持原样，并且不会跳到顶部。

下面是我已经尝试过的代码。

JavaScript

jQuery(function($) {
  $(".x-btn-navbar").on("click", function() {
    $("body").toggleClass("noScroll");
  });
});

CSS

.noScroll {
    position: fixed;
}

编辑，这是网站：http://s2br5s5r3.gb-02.live-paas.net

Answer 1

首先从类非滚动中删除固定的css位置。这就是导致单击菜单按钮时页面跳到顶部的原因。打开菜单后，它应该可以滚动，我假设您要防止打开菜单时滚动打开菜单后面的页面。 Ypu可以使用javascript事件监听器来实现此目标，例如：

EventTarget.addEventListener('scroll', noscroll);

代替EventTarget给主体提供ID，并在用户单击元素时使用事件侦听器，但是当他们关闭菜单时，您应该使用以下命令删除事件侦听器：

EventTarget.removeEventListener()

希望对您有帮助

请记住，您必须将页面的内容与菜单分开，因为如果在主体上添加no滚动条，只要它是主体的子级，它也将应用于菜单 >

Answer 2

href="#"使页面转到顶部，正确输入网址，例如：href="https://www.google.com/"，然后将解决指向顶部的问题。

css

.noScroll {
    overflow: hidden;
    /* position: fixed */ 
}

javascript

jQuery(function($) {
  $(".x-btn-navbar").on("click", function() {
    $("html, body").toggleClass("noScroll");
  });
});

然后<body>将不可滚动。

防止背景滚动和跳到手机顶部

2 个答案: