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一起使用，我已经在网站上尝试了很多javascript，但我做不到。如果您能帮助我，我将不胜感激。

Answer 1

在HTML上添加position: fixed;而不是overflow: hidden;来防止滚动。最终也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;
}

固定身体位置后，停止页面从顶部到顶部

1 个答案: