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 */ 
}

上記スクロールバーとして私のために動作しません。見えるままです。しかし、 "border-box"以外のものに変更したときにスクロールバーが消え、スクロールが期待通りに機能する親要素 "box-sizing"のプロパティがページ上に見つかりました。

ブラウザによると、このCSSはブートストラップから来ています.Sass gem。

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

私の二つの質問があります： 1）なぜこのような場合でしょうか？ 2）CSSファイルをオフにするにはどうすればよいですか？

出典

2017-09-12 Dercni

要素のボックスの端にスクロールバーを配置します。スクロールバーは内側の境界エッジと外側ののパディングエッジの間に挿入する必要があります。スクロールバーで占められているスペースは、スクロールバーを使用してエレメントによって形成された包含ブロックの（サイズから引き算された）を取り出す必要があります。

content-boxは（それがデフォルト）要素のコンテンツボックスは、それの値が幅プロパティの、任意の境界又はパディングの幅は、最終的にレンダリング幅に追加されることを意味し;
border-boxは、幅と高さに指定した値の枠線とパディングを考慮してブラウザに指示します。

あなたはこのコードを追加することができます

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

出典

2017-09-12 03:39:20 JiangangXiong

ニースの答え、それはちょうどそれが上書きされないと私は、彼/彼女は、それは代わりに 'ボーダーの'コンテンツbox'になりたいと思う確実にするために、 '！のimportant'を持っている必要があります-box'。 – MarioE

ボックスサイズ設定の使用：コンテンツボックス。なし！重要な仕事。 – 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をスクロール可能にしないスクロールバー

答えて

関連する問題