Question

Chrome中有趣的错误。如果页面最初加载时可滚动div不在屏幕上，则该可滚动div不能通过鼠标滚轮或触摸板手势滚动，直到它被给定焦点（通过双击其元素内的某个位置，或选择其中的文本）。

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

错误当您单击“显示侧容器”按钮时，侧容器将滑入视图，主容器将滑出视图。如果您立即尝试使用鼠标滚轮或笔记本电脑触控板上的双指手势滚动，则不会发生任何事情。您可以在键盘上使用向上翻页和向下翻页，但这些确实有效。当然，您也可以使用鼠标单击实际滚动。

在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”元素就不再显示上面提到的bug了！ 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">  </div>

（-1的值应使div超出正常的标签顺序。）

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

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

这里的时间是150毫秒，就在转换应该完成之后。等于转换持续时间的值也可能会起作用，但为了安全起见，我将其设置得更长。

更完整的示例可能是：

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

最后，您可能不希望焦点outline专注于div，因此您可以选择在{{1}的样式规则中使用outline: none删除它}}。在我的项目中，但不是在问题的原始示例中，这实际上突破了div，并且它又回到了不可滚动的状态。所以我这样做了：

div

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

Answer 2

您已将overflow-y设置为auto，这意味着它将为屏幕外内容创建滚动条。由于.large-content具有如此大的高度，它会脱离屏幕。只需将overflow-y设置为无，这将不再发生。不是错误，只是用户错误。

Chrome Scrollable Div Bug

2 个答案: