paddingとbox-sizingによる純CSS隠しスクロールバーの実現

ネット上でキーワード「css隠しスクロールバー」を検索すると、基本的に以下の2つの結果が得られます.

overflow: hiddenいいでしょう.この問題を探している人はきっとoverflowを知っていると信じています.スクロールバーを隠してもスクロールし続ける方法を聞きたいのは明らかです.肝心なのは半分の検索結果がoverflowを紹介していることです...

::-webkit-scrollbar {display:none}という擬似要素は効果的に実行可能であるが、このwebkit接頭辞は基本的にchromeでしか有効ではなく、明らかに問題を解決できないことを示している.

ここでは、box-sizingがcontent-boxモードの場合の奇抜な性質を利用して、要素にpadding-rightを設定すると、現在の要素の幅が増加し、現在の要素の外に現在の要素の元の幅と同じ要素をカバーするだけで、さらに外層要素をoverflow: hiddenに設定すると、スクロールバーを隠すことができます.サンプルコードは次のとおりです.

body {
  display: flex;
  height: 100vh;
}
//    
.box1 {  
  height: 20%;
  width: 20%;
  border: 1px solid #008080;
  margin: auto;
  overflow: hidden;
}
//       
.box2 {
  box-sizing: content-box;
  height: 100%;
  padding-right: 17px;
  width: 107%;
  overflow: auto;
}

  

    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
    
ddddd
  

http://codepen.io/almon123/pen/KrAxJR