在移动设备上禁用水平滚动（或通过滚动单击）

Question

我有一个元素是浏览器宽度的三倍 window（必须如此），我似乎无法禁用在移动设备上横向滚动的功能。

我发现很多线程都有类似的问题，几乎每个人都建议添加

max-width:100%; and overflow-x:hidden;

到正文 and/or html 标签，这是我做的或添加或多或少类似于

的内容

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

（我尝试了几乎所有遇到的变体）但是这些解决方案都没有用

body
{
    max-width: 100vw;
    overflow-x: hidden;
    position: absolute;
    height: auto;
    padding: 0px;
    margin: 0px;
}

有人知道如何解决这个问题吗？谢谢

Answer 1

我将您网站的 HTML 复制到我的本地服务器，这似乎有效。让我知道您的里程是否有变化。

在您的 header 中添加此内容。我们基本上是告诉移动设备禁用放大和缩小，并将比例设置为 1:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

为 div 添加此样式，它将包装 #main div:

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
  }
</style>

更新： 在我的一个移动设备上，这还不够，所以我不得不使用以下样式：

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
    position:relative;
    top:7vh;
    height:53vh;}
  #main {
    top:0;
  }
</style>

现在用 div #container 包装你的 #main div。由于在上一步中添加了 CSS，任何超过浏览器宽度 100% 的内容都应该被隐藏。

<div id="container">
  <div id="main">
    .
    .
    .
  </div>
</div>

在移动设备上禁用水平滚动（或通过滚动单击）

Disable horizontal scrolling on mobile devices (or with scroll-click)

html

css

scroll