如何在100vh页面上禁用移动设备上的垂直滚动？

Question

我在移动设备上垂直滚动时遇到问题，页面水平滚动，并且机体高度设置为100vh，但是我仍然可以在移动设备上向下滚动，它弄乱了我的内容并显示了一些奇怪的“加载” div

body{
    overflow-x: scroll;
    overflow-y: hidden;
    width: 170vw;
    max-height: 100vh;
}

向下滚动后的外观： 外观如何：

Answer 1

尝试设置height: 100vh而不是最大高度，并像这样添加position: relative：

body {
  overflow-y: hidden;
  height: 100vh;
  position: relative;
}


/** CSS BELOW IS JUST FOR SHOW **/

div {
  background: grey;
  width: 200vw;
  height: 200vh
}

<div></div>

此外，也不需要overflow-x。这将是自动的。

Answer 2

好的，我找到了解决方案！添加！important解决了该问题

body{
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    width: 170vw;
    max-height: 100vh;
}

Answer 3

body{ 
    position: fixed; 
    top: 0; 
    bottom: 0; 
} 

我认为这也可以解决。...