让div可滚动无滚动条

我再次阅读了许多关于此主题的文章，但没有一个建议的解决方案可行。我现在有我的解决方案，但是，不知道它为什么会起作用，并希望得到一些见解。让div可滚动无滚动条

下面是该解决方案遍布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 */ 
}

以上不为我工作的滚动条仍然可见。但是，我在页面上找到了一个父元素“box-sizing”的属性，当更改为“border-box”以外的任何内容时，滚动条消失并且滚动按预期工作。

根据浏览器，这个CSS来自bootstrap.Sass宝石。

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

我的两个问题是： 1）为什么会出现这种情况？ 2）如何在我的CSS文件中关闭它？

来源

2017-09-12 Dercni

滚动条放置在元素框的边缘，它应该插入内边框边缘和外边框的边缘之间。由滚动条占据的任何空间应该从元素与滚动条形成的包含块中取出（从其维数中减去）。

的content-box（默认情况下它是）指该元素的含量箱将成为的值的它的width属性，任何边界或填充的宽度将被添加到最终渲染宽度.;
border-box表示通知浏览器计算您为宽度和高度指定的值中的任何边框和填充。

您可以添加以下代码：

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

来源

2017-09-12 03:39:20 JiangangXiong

尼斯的答案，它应该有一个'！important'只是为了确保它不会被覆盖，我认为他/她希望它是'内容box'，而不是'边境-box'。 – MarioE

使用框大小：content-box;没有！重要的工作。 – Dercni

您正在寻找这样的事情？

.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; 
 
      }

<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>

来源

2017-09-12 06:30:44

是的，然而问题在于盒子大小的属性。往上看。 – Dercni

让div可滚动无滚动条

回答

相关问题