スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)

  .container::-webkit-スクロールバー{
    表示: なし;
  }

<div class="outer">
    <div class="content">
      <p>1111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </div>
</div>
 .外側{
   幅: 300ピクセル;
   高さ: 300px;
   オーバーフロー: 非表示;
 
   。コンテンツ {
     幅: 330ピクセル;
     /*右マージン: -15px;*/
     高さ: 100%;
     オーバーフロー-x:非表示;
     オーバーフロー-y: 自動;
     背景: 赤;
     パディング上部: 100px;
 
     p:not(:最初の子) {
       上マージン: 100px;
     }
   }
 }