Question

我有一个问题已被其他类似这样的帖子回答了一半： Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

或那个：

Does overflow:hidden applied to <body> work on iPhone Safari?

问题是关于 iOS Safari 和移动Chrome 中的overflow:hidden不能正常工作的问题。

机身上的

overflow:hidden适用于Firefox。而且，如果您在Firefox中以这种方式尝试下面的代码，则它应该是正确的工作方式。

所以我已经看到，overflow:hidden在iOS Safari和移动版Chrome的主体上不起作用–您必须将所有内容包装在主体下方的div中，并给其overflow:hidden。但是不幸的是，这种方式不能满足我的要求，因为它将忽略JavaScript函数scrollLeft。

以下是应该发生的情况的简短说明：

您打开站点。正文或包装将显示一半，因为它有width:180%。

一个jQuery代码将整个内容滚动到应该保留的位置{scrollLeft:(right)}。（至少在x轴上）

单击按钮应将站点移到该站点也应保留的左侧。（应该可以在x轴/ y轴上滚动）也许有点复杂；如果您想自己尝试，请随时复制代码。

我认为问题可能是overflow:hidden被覆盖或覆盖了JavaScript函数。

有人知道如何解决此问题吗？也许是另一种告诉浏览器不要在x轴上滚动的方法...

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Scroll test</title>

  <style>
    @charset "UTF-8";
    :root {
      --blue: #127296;
    }
    
    html {
      height: 100%;
      font-size: 20px
    }
    
    body {
      margin: 0px;
      overflow-x: hidden;
    }
    
    .wrapper {
      /* overflow-x: hidden; */
    }
    
    .textfeld {
      color: var(--blue);
      padding: 30px 35px 150vh 35px;
    }
    
    .white {
      color: white;
    }
    
    button {
      border: none;
      background: none;
      font-size: 1em;
      padding: 2px 5px 15px 5px;
      align-self: center;
    }
    
    .eins {
      grid-column: 1/ span 6;
    }
    
    .zwei {
      grid-column: 7 / -1;
      background-color: var(--blue);
    }
    
    #content {
      width: 180%;
      grid-template-columns: repeat(12, 1fr);
      margin: 0px;
      height: auto;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }
  </style>

</head>

<body>
  <div class="wrapper">
    <div id="content">
      <div class="spalte eins fr">
        <div class="textfeld content">
          <button type="button" name="button" class="button_2">Click</button>
        </div>
      </div>

      <div class="spalte zwei">

        <div class="textfeld content de white">
          <button type="button" name="button" class="button">Click</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var left = $(document).outerWidth() - $(window).width();
    var right = $(window).width() - $(document).outerWidth();
    $('body, html').scrollLeft(left);


    $(".button").click(function() {
      $('body, html').animate({
        scrollLeft: (right)
      }, 200);
      console.log("click");
    });
    $(".button_2").click(function() {
      $('body, html').animate({
        scrollLeft: (left)
      }, 200);
    });
  });
</script>

</html>

溢出：iOS Safari中隐藏的功能无法与scrollLeft结合使用

0 个答案: