html - Chrome 可滚动 Div 错误

Question

Chrome 中一个有趣的错误。如果页面最初加载时可滚动 div 不在屏幕上，则该可滚动 div 无法通过鼠标滚轮或触摸板手势滚动，直到它获得焦点(通过双击其元素内的某处，或选择其中的文本) .

更新 此错误记录在此处 https://code.google.com/p/chromium/issues/detail?id=417345截至 2015 年 5 月，它仍未修复。该线程使用 javascript 提供了一些有趣的可能解决方案，但我想看看是否有人对修复有任何替代建议，可能不涉及 JS

错误 当你点击“Show Side Container”按钮时，side container 会滑入 View ，而 main container 会滑出 View 。如果您立即尝试使用鼠标滚轮或笔记本电脑触控板上的双指手势滚动，什么也不会发生。您可以在键盘上使用 page up 和 page down，但是这些确实有效。当然，您也可以通过用鼠标单击它来使用实际的滚动条。

在firefox和IE中，可以使用鼠标滚轮在该元素上滚动

例子 http://codepen.io/msorrentino/full/aOYaOM/

HTML

<div class="wrapper">
    <div class="page-container">
        <button class="show-side">Show Side Container</button>

    </div>
    <div class="side-container">
        <button class="close-side">Close Side Container</button>
        <div class="large-content"></div>
    </div>
</div>

CSS

 html,
        body,
        *,
        *:after,
        *:before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        .wrapper {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }


        .page-container, .side-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 5px solid;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.68, 0, 0, 1);
            transition: -webkit-transform 0.2s cubic-bezier(0.68, 0, 0, 1), transform 0.2s cubic-bezier(0.68, 0, 0, 1);
        }

        .page-container {
            -webkit-transform: translate(0,0);
            transform: translate(0,0);
        }

        .page-container-hidden {
            -webkit-transform: translate(-100%,0);
            transform: translate(-100%,0);
        }

        .side-container {
            -webkit-transform: translate(100%,0);
            transform: translate(100%,0);
        }
        .side-container-visible {
            -webkit-transform: translate(0,0);
            transform: translate(0,0);
        }

        .large-content {
            height: 2000px;
        }

JS

$('.show-side').click(function(){
            $('.page-container').addClass('page-container-hidden');
            $('.side-container').addClass('side-container-visible');
        });
        $('.close-side').click(function(){
            $('.page-container').removeClass('page-container-hidden');
            $('.side-container').removeClass('side-container-visible');
        });

变得更有趣 如果你让原来的“page-container”元素有足够的内容迫使它溢出，那么“side-container”元素就不再显示上述错误! http://codepen.io/msorrentino/full/WvzgQZ/

欢迎对这里发生的事情提出任何想法，并且非常欢迎任何可能的修复。

Answer 1

当我遇到一个非常类似的问题时，当我遇到一个非常相似的问题时，屏幕外的菜单在切换时会在屏幕上移动。

这里是相关的 HTML 和 CSS，经过简化:

<div class="menu">
  <!-- long list of menu items here -->
</div>

.menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform ease 125ms;
}
.menu--active {
  transform: translateX(0);
}

.menu--active 用按钮切换。

虽然您正在寻找非 JS 解决方案，但我想我会发布我发现的最干净的解决方法，以防人们在这里遇到同样的问题。

解决方法是在转换完成后 简单地在 div 上强制一个焦点状态。为此，您首先必须为 div 提供一个 tabindex 以便它能够获得焦点。

<div class="menu" tabindex="-1">
  <!-- long list of menu items here -->
</div>

(-1 的值应该使 div 脱离正常的 Tab 键顺序。)

然后，使用一些延迟的 jQuery，关注 div。这应该与您用来“激活”您的 div 的任何逻辑一起调用。

setTimeout( function() {
  $('.menu').focus();
},150);

这里的时间是 150 毫秒，正好在转换应该完成之后。一个等于过渡持续时间的值也可能有效，但为了安全起见，我将其设置得更长一些。

一个更完整的例子可能是:

$('.menuButton').on('click', function() {
  $('.menu').addClass('menu--active');
  setTimeout( function() {
    $('.menu').focus();
  },150);
});

最后，您可能不希望焦点 outline 位于焦点 div 上，因此您可以选择使用 outline: none 将其删除code> 在您的 div 的样式规则中。在我的元素中，但不是在问题的原始示例中，这实际上打破了对 div 的关注，它又回到了不可滚动的状态。所以我改为这样做:

.menu:focus {
  outline-color: transparent;
}

我 fork 了原始示例并将此解决方案包含在此处:http://codepen.io/johntobinme/full/MaPMgY