修改

Question

我已经构建了一个寻呼机，如果移动菜单处于打开状态，我现在正在摆弄每个设备上的滚动。

如果单击汉堡菜单按钮，我将为内容包装器提供.no-scrolling类。该类具有以下样式：

.no-scrolling {
  position: fixed;
  overflow: hidden;
}

这适用于桌面和移动（触摸）设备，但很遗憾，如果激活了类，页面会跳转到页面的最顶层。好吧，我明白了，为什么会这样，但我不知道解决方法。

如果用户已经滚动到一半，然后决定打开菜单，页面不应该跳到顶部，而应该保持在这个确切的位置。

你会怎么做？

修改

由于 skyline3000 的提议，我添加了一个防止默认值。不幸的是，这段代码不能正常运行。在我的iPhone和我的iPad（Pro）上它可以工作，但在我的MacBook上却没有......

有什么问题吗？

function animateToggle(click, move) {

  $('.hamburger-menu').on(click, function() {

    // some code to add an overlay and animate the button

    if (prevent === true) {
      $('html').unbind(move).on(move, function() {
        prevent = false;
      });
    }
    else {
      $('html').on(move, function(e){
        e.preventDefault();
        prevent = true;
      });
    }
    var prevent = false;

  });

} // animateToggle()

if ( touchscreen === true ) {
  animateToggle('touchend', 'touchmove');
}
else if ( touchscreen === false ) {
  animateToggle('click', 'mousemove')
}

Answer 1

你是否尝试过没有这个＆＃34;位置：固定;＆＃34;？因为只有＆＃34;溢出：隐藏＆＃34;足以锁定＆＃34;它所在的页面

Answer 2

将位置设置为“固定”会跳到顶部，因为您没有设置上/下值，因此默认情况下它们为'0'。

为了防止这种情况，您应该在设置位置之前保存滚动偏移并将其设置为顶部，例如，在“$（document）.click”中

var ftop = $(window).scrollTop();
$('').css({position: 'fixed', top: ftop + 'px'});

Answer 3

应用您的代码

.no-scrolling {
  overflow: hidden;
}

到Window元素，而不是点击时的容器。我认为你不需要这个职位：固定。

禁用一个寻呼机上的滚动

修改

3 个答案: