Question

我正在制作弹出的侧面导航并且工作正常，但问题是当该窗格出现时（使用translate3d），当在Chrome中使用iPhone或仿真模式滚动时，它会滚动<body>在它背后，就好像我的手指压过了这层。

在移动宽度的桌面浏览器上，它完全按预期工作。出现导航，滚动锁定到导航窗格，并且不滚动背景元素。

我觉得这可能是translate3d以及它与z-index的交互方式所致？但这是一个教育程度很低的猜测。

以下是我正在使用的内容：

.side-nav--fixed {
    position: fixed;
    width: 230px;

        @include media-query(palm) {
            width: 100% !important;
            position: fixed !important;
            top: 125px; right: 0; bottom: 0; left: 0;
            z-index: 5555;
            background-color: #fff;
            overflow-y: scroll;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
            @include transform(translate3d(-100%, 0, 0));
            @include single-transition(transform 1s ease-out);
            @extend %ui-shadow;

            &::-webkit-scrollbar {
                display: none;
            }

            &.animate {
                @include transform(translate3d(0%, 0, 0));
                @include single-transition(transform 1s ease-out);
            }
        }
  }


.no-scroll {
   position: fixed;
}



$('body').on('click', '.js-side-nav-toggle', function(ev) {
    $('html, body').toggleClass('no-scroll');
});

快速总结：我使用translate3d引入一个图层，然后我想限制滚动和ontouchmove事件到该图层，并忽略它背后的所有元素。

感谢您的时间。

编辑：

我设法通过将position: fixed;添加到.no-scroll并在点击菜单切换时应用于html和body来设法解决此问题。我使用工作代码更新了上面的代码。

Answer 1

我设法通过添加位置来修复此问题：已修复;单击菜单切换时应用于html和body的.no-scroll。我使用工作代码更新了上面的代码。

 .side-nav--fixed {
    position: fixed;
    width: 230px;

        @include media-query(palm) {
            width: 100% !important;
            position: fixed !important;
            top: 125px; right: 0; bottom: 0; left: 0;
            z-index: 5555;
            background-color: #fff;
            overflow-y: scroll;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
            @include transform(translate3d(-100%, 0, 0));
            @include single-transition(transform 1s ease-out);
            @extend %ui-shadow;

            &::-webkit-scrollbar {
                display: none;
            }

            &.animate {
                @include transform(translate3d(0%, 0, 0));
                @include single-transition(transform 1s ease-out);
            }
        }
  }


.no-scroll {
   position: fixed;
}



$('body').on('click', '.js-side-nav-toggle', function(ev) {
    $('html, body').toggleClass('no-scroll');
});

禁用在触摸设备上滚动后面的图层

1 个答案: