純CSSはスクロールバーを隠すがスクロールの効果がある
いどうたんし
モバイル側のページはChromeとSafariを互換化すれば十分なので、カスタムスクロールバーの擬似クラスセレクタ:-webkit-scrollbarを使用してスクロールバーを非表示にすることができます.
.container::-webkit-scrollbar {
display: none;
}
PC端末
PC側の互換性に対する要求は相対的に高く、すべての方法を変えることができ、大体の構想はコンテンツdivの外に親容器divをパンし、overflow:hiddenを設定し、コンテンツdivにdisplay-x:hiddenを設定することである.display-y: auto; 最後に、親コンテナdivの幅がコンテンツdivの幅より小さいか、またはコンテンツdivのmargin-rightを負の値に設定すればよい.
1111
222
333
444
.outer {
width: 300px;
height: 300px;
overflow: hidden;
.content {
width: 330px;
/*margin-right: -15px;*/
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background: red;
padding-top: 100px;
p:not(:first-child) {
margin-top: 100px;
}
}
}