讓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可滾動無滾動條

回答

相關問題