javascript - 竖屏状态下强制横屏，当弹窗是时，页面上的左右滚动数据，层级会高过弹窗页面，z-index失效，在苹果上？

Question

当我在竖屏状态下强制横屏

@media screen and (orientation: portrait) {  .app {    position: absolute;    width: 100vh;    height: 100vw;    top: 0;    left: 100vw;    -webkit-transform: rotate(90deg);    -moz-transform: rotate(90deg);    -ms-transform: rotate(90deg);    transform: rotate(90deg);    transform-origin: 0% 0%;    -webkit-transform-origin: 0% 0%;    -moz-transform-origin: 0% 0%;    -ms-transform-origin: 0% 0%;  }}

当左右滚动时 浏览器的层级会发生错误，比如弹窗时，左右滚动的数据会显示到弹窗最前面

解决层级问题

Answer 1

解决此问题的一种方法是使用 CSS 的 pointer-events 属性。这个属性可以让你控制元素是否可以接收鼠标事件。

在你的情况下，你可以尝试将 pointer-events 设置为 none，这样当用户滚动页面时，滚动事件就不会影响到你希望保持固定位置的元素。

以下是修改后的 CSS 代码示例：

@media screen and (orientation: portrait) {  .app {    position: absolute;    width: 100vh;    height: 100vw;    top: 0;    left: 100vw;    -webkit-transform: rotate(90deg);    -moz-transform: rotate(90deg);    -ms-transform: rotate(90deg);    transform: rotate(90deg);    transform-origin: 0% 0%;    -webkit-transform-origin: 0% 0%;    -moz-transform-origin: 0% 0%;    -ms-transform-origin: 0% 0%;    pointer-events: none; /* Add this line */  }}

这个方法应该能够解决你遇到的问题。然而，请注意，如果你的元素需要响应用户的鼠标事件（例如，如果用户需要点击你的元素），那么你可能需要找到另一种方法来处理这个问题，因为 pointer-events: none; 会阻止所有鼠标事件。