禁用移动设备上的水平滚动(或滚动单击)

Question

我有一个元素是浏览器窗口宽度的三倍(它需要),我似乎无法禁用在移动设备上横向滚动的功能.

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

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

我做的身体和/或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复制到我的本地服务器,这似乎有效.如果您的情况有所不同,请告诉我.

在标题中,添加此项.我们基本上告诉移动设备禁用放大和缩小,并将比例设置为1:

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

为包含#main div的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>

现在用#maindiv 包装你的div #container.由于在上一步中添加了CSS,因此应隐藏任何超过浏览器宽度100%的内容.

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