Question

我再次阅读了有关此主题的许多帖子，但没有一个建议的解决方案有效。我现在有了我的解决方案，然而，不知道为什么它有效并且会欣赏一些见解。

以下是遍布SO的解决方案： Hide scroll bar, but while still being able to scroll

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <div class="hidden-xs hidden-sm col-md-3" id="parent">
      <div id="child">
        Test text here
      </div>
    </div>
  </body>
</html>

CSS

#parent {
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  height: calc(100vh);
  overflow: hidden;
}

#child {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

以上对我不起作用，因为滚动条仍然可见。但是，我在页面上找到了父元素的属性＆＃34; box-sizing＆＃34;当改变为＆＃34; border-box＆＃34;以外的任何东西时滚动条消失，滚动按预期工作。

根据浏览器的说法，这个CSS来自bootstrap.Sass gem。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我的两个问题是： 1）为什么会这样？ 2）如何在CSS文件中将其关闭？

Answer 1

滚动条放在元素框的边缘，它应该插在内边缘和外边缘之间填充边缘。应该取出滚动条占用的任何空间（由尺寸减去）由带有滚动条的元素形成的包含块。

content-box（默认为）表示元素的内容框将是其宽度属性的值，任何边框或填充的宽度将添加到最终渲染宽度。;
border-box表示浏览器会考虑您为宽度和高度指定的值中的任何边框和填充。

您可以添加以下代码：

#child {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

你在找这样的东西吗？

＆＃13;

.mask{
                width: 300px;
                height: 400px;
                background: #ddd;
                overflow: hidden;
            }
            .scroll{
                font-size: 17px;
                width: 318px;
                padding-right: 18px;
                height: 400px;
                overflow-y: scroll;
                overflow-x: hidde;
            }

＆＃13;

<div class="mask">
            <div class="scroll">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Donec pellentesque condimentum condimentum. Ut ut nulla vitae 
                turpis tempor lacinia a non ipsum. Nam velit lacus, interdum q
                uis scelerisque eget, scelerisque ac ipsum. Curabitur sed interdum 
                lectus. Cras ac mattis libero, in ultricies lectus. Nulla sodales a 
                felis nec faucibus. Vivamus finibus eu dui nec blandit. Donec 
                aliquam, orci ac imperdiet hendrerit, lorem est lacinia turpis, 
                et aliquet mi elit id mauris. Cras venenatis aliquet tellus id 
                faucibus. Vestibulum enim tellus, sollicitudin eget libero et, 
                condimentum auctor quam. Nullam fermentum felis at ligula rutrum, 
                at iaculis neque suscipit. Vivamus sagittis ornare nisl id 
                elementum. Quisque sit amet libero non ex convallis volutpat. 
                Nulla lacinia eros eget metus accumsan, id mattis ante tempus. 
                Proin vulputate ante sed efficitur condimentum. Etiam pharetra 
                justo dolor, ac fermentum arcu iaculis vel.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Donec pellentesque condimentum condimentum. Ut ut nulla vitae 
                turpis tempor lacinia a non ipsum. Nam velit lacus, interdum q
                uis scelerisque eget, scelerisque ac ipsum. Curabitur sed interdum 
                lectus. Cras ac mattis libero, in ultricies lectus. Nulla sodales a 
                felis nec faucibus. Vivamus finibus eu dui nec blandit. Donec 
                aliquam, orci ac imperdiet hendrerit, lorem est lacinia turpis, 
                et aliquet mi elit id mauris. Cras venenatis aliquet tellus id 
                faucibus. Vestibulum enim tellus, sollicitudin eget libero et, 
                condimentum auctor quam. Nullam fermentum felis at ligula rutrum, 
                at iaculis neque suscipit. Vivamus sagittis ornare nisl id 
                elementum. Quisque sit amet libero non ex convallis volutpat. 
                Nulla lacinia eros eget metus accumsan, id mattis ante tempus. 
                Proin vulputate ante sed efficitur condimentum. Etiam pharetra 
                justo dolor, ac fermentum arcu iaculis vel.
            </div>
        </div>

＆＃13;

使div可滚动无滚动条

2 个答案: