css - 滚动浏览 Chrome 中的隐藏内容

Question

我在 Chrome 中发现了非常奇怪的错误，我需要你的帮助。我有 divoverflow: hidden并在其中输入。当我在此输入中单击并拖动选择文本时，向下移动鼠标就像我想选择几行一样，这会强制滚动隐藏内容。

在 jsfiddle 中试试这个：http: //jsfiddle.net/bwgan/

有人遇到过这个问题吗？如何仅使用 css 修复它？

Answer 1

添加

input:active { pointer-events:none; }

在你的 CSS 中。它会起作用的。

Answer 2

我在这里写了一篇关于我在这方面的发现的博客文章：http: //blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome -ie-8-firefox-opera-and-safari.aspx

总之，你基本上这样做：http: //jsfiddle.net/d4D8M/

.element, .outer-container {
    width: 200px;
    height: 200px;
}

.outer-container {
    border: 5px solid purple;
    position: relative;
    overflow: hidden;
}

.inner-container {
    position: absolute;
        left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

.inner-container::-webkit-scrollbar {
    display: none;
}

和：

<div class="outer-container">
    <div class="inner-container">
        <div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.

Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.
        </div>
    </div>
</div>