固定正文位置后停止页面转到顶部

Question

你好，这是我的第一篇文章。

我在这里搜索了很多，但在将位置固定到正文后，我无法弄清楚如何阻止我的页面进入顶部。

我想要的与此类似，但我无法使其工作Prevent page scrolling to top upon adding fixed position

让我说清楚。当我的移动菜单打开时，我想让正文不可滚动（固定），但添加固定位置会使我的页面转到顶部。

CSS

.site-navigation { position: fixed; width: 100%; }
@media screen and (max-width: 991px) {
.is-menu-toggled-on .nav-menu {  
    height: 400px;
    overflow-y: scroll;
    overflow-x:hidden;} 

.is-menu-toggled-on body
    {
    position: fixed;
    overflow: hidden;
    width: 100%
    }

看这里。每次我按下汉堡菜单图标（3 行）并且菜单栏打开下面的页面时都会滚动回到顶部...我想让它在当前位置不可滚动 --> https://imgshare.io/image/SQzVZ

我知道这可以与一些 javascript 一起使用，我已经从网站上尝试了很多，但我做不到。如果您能帮助我，我将不胜感激。

Answer 1

只需在 html 上添加 overflow: hidden; 而不是 position: fixed; 以防止滚动。最后touch-action: none; pointer-events: none;也是。

html {
    overflow-x: hidden;
    overflow-y: auto;
}

html.is-menu-toggled-on {
    overflow: hidden;
    pointer-events: none;
    touch-events: none;
}

body {
    overflow: visible;
    pointer-events: all;
    touch-events: auto;
}