Question

所以目前我正在做一些iPhone和iPad测试，并注意到一个与滚动有关的非常烦人的错误。所以目前我的基本页面是这样的：

.new-class{
    .navbar-item;
}

这是一个非常基本的HTML示例，显示我的基本内容区域，但我也有一个名为<body> <div> Content of my website... <button>This button uses jQuery to add a class to the fixed-form div</button> </div> <div class="fixed-form"> <form> </form> </div> </body>的div，当在内容区域按下按钮时，这会添加一个具有以下样式的类到fixed-form div：

fixed-form

然后z-index:0; color:#fff; position: fixed; height: 100% !important; overflow-y:auto; -webkit-overflow-scrolling: touch; overflow-x:hidden; top:0; width:100%; z-index:999 !important; div覆盖视口。问题是fixed-form后面的内容/主体仍然是可滚动的，元素仍然是可点击的。当然，z-index会阻止这种情况发生，但事实并非如此。知道为什么会这样吗？我只想完全禁用所有不允许fixed-form div的内容滚动和点击。

更新：到目前为止，我已经尝试将overflow：hidden添加到内容div但是这会停止水平滚动，但不会影响垂直滚动问题。

由于

Answer 1

您应该在class而不是body元素上添加div。当body处于有效状态时，在div上添加以下css。

body.form-active {
    overflow: hidden;
    height: 100%;
}

＆＃13;

$('button').click(function() {
  $('body').toggleClass('form-active');
});

＆＃13;

body.form-active {
  height: 100%;
  overflow: hidden;
}
.fixed-form {
  background: #000;
  z-index:0;
  color:#fff;
  position: fixed;
  height: 100% !important;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
  top:0;
  width:100%;
  z-index:999 !important;
  display: none;
}
.form-active .fixed-form {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
 Content of my website... Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...
 <button>This button uses jQuery to add a class to the body</button>
</div>
<div class="fixed-form">
  Form content Goes here...
  <button>This button uses jQuery to add a class to the body</button>
 <form>
 </form>
</div>
</body>

＆＃13;

Answer 2

我已经找到了一个确切的原因......但是找不到任何真正清楚的东西似乎z-index在IOS上的管理方式不同，它们对“堆叠上下文”非常重要。

找到this explanation：

（...）最终，定位的孩子的堆叠上下文由任何具有位置定义的祖先控制，并且它是最终定位祖先的z指数，指示所有孩子将去哪里。 z-index为1的定位父级变为“原子级”，并且就堆叠上下文之外的元素而言，其所有子级实际上将是z-index 1。

我在几个论坛中看到的类似问题的解决方案是使用CSS 3d翻译而不是z索引。

您可以在fixed-form上尝试此操作：

-ms-transform: translate3d(0,0,10);
-webkit-transform: translate3d(0,0,10);
transform: translate3d(0,0,10);

对于z-index: 10，它是“等效的”。

当固定位置div处于活动状态时，禁用iPad，iPhone上的滚动

2 个答案: