横並びの画面からはみ出してるコンテンツを全部見てもらいたいとき、スクロールするだけで横に動いたらいいなーってことないですか？
yukipan的には横にはみ出してるより縦並びで全部見れたほうが親切じゃないかと思う派なんだけど、コンテンツがたくさんあるとそうもいかない場合もあり・・
ということで、横スクロールできるコードをメモしておく。
あと、画面幅が変わってもいい感じになるよう、コンテンツ幅1000pxで仮に設定して、カードが4枚ある場合、右に2枚目のカードが少し見える仕様のCSS（SCSS）もメモしておく。
（カード間の間隔は20pxに設定）
HTML
<div class="box mt40" id="scrollX">
<ul class="list">
<li class="item">
imgとかコンテンツ入れる
</li>
<li class="item">
imgとかコンテンツ入れる
</li>
<li class="item">
imgとかコンテンツ入れる
</li>
<li class="item">
imgとかコンテンツ入れる
</li>
</ul>
</div>SCSS
.box{
width: 100%;
overflow-x: auto;
/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
-ms-overflow-style: none;
/*Firefoxへの対応*/
scrollbar-width: none;
/*Google Chrome、Safariへの対応*/
&::-webkit-scrollbar{
display: none;
}
.list{
display: flex;
flex-direction: row;
width: calc((100% - 5% * 2 - 20px) * 4);
margin-left: 5%;
margin-right: 5%;
@media (min-width: 1000px) {
max-width: calc(1000px * 4);
width: calc(100% * 4);
margin-left: calc(50% - 1000px / 2);
margin-right: calc(50% - 1000px / 2);
}
.item{
max-width: calc(1000px - 20px);
width: calc(100% - 20px);
&:not(:first-child){
margin-left: 20px;
}
}
}//.list
}//.boxJavaScript
const scrollX = document.querySelector("#scrollX");
scrollX.addEventListener("wheel", (e) => {
if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
const maxScrollLeft = scrollX.scrollWidth - scrollX.clientWidth;
if (
(scrollX.scrollLeft <= 0 && e.deltaY < 0) ||
(scrollX.scrollLeft >= maxScrollLeft && e.deltaY > 0)
)
return;
e.preventDefault();
scrollX.scrollLeft += e.deltaY;
});参考にさせてもらったサイト紹介
トラックパッドで直接横スクロールした場合や、コンテンツの端まで来たときの挙動の調整など親切に解説してありわかりやすかったです。
ありがとうございます。
