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

【问题标题】：How to disable vertical scrolling on mobile on a 100vh page?如何在 100vh 页面上禁用移动设备上的垂直滚动？
【发布时间】：2019-09-06 11:32:27
【问题描述】：

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

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

向下滚动后的外观：它应该是什么样子：

【问题讨论】：

您是否尝试添加 height: 100vh，而不是 max-height: 100vh;
是的，没有任何改变:(
body{ 位置：固定；顶部：0；底部：0；我认为这也将解决它....

标签： html css

【解决方案1】：

尝试设置 height: 100vh 而不是 max-height 并像这样添加 position: relative：

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


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

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

&lt;div&gt;&lt;/div&gt;

另外，不需要overflow-x。它将是自动的。

【讨论】：

【解决方案2】：

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

我认为这也将解决它....

【讨论】：

【解决方案3】：

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

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

【讨论】：