横スクロールの横スクロール

Question

https://css-tricks.com/examples/HorzScrolling/を使用してサイトを作成しましたが、クロムの最新バージョンでは動作しません。私はこれを模倣する他の方法を見つけることができないようです。デスクトップとモバイルの上または右のスクロールで右にスクロールするサイトを作成する最も効果的な方法は何ですか？

Answer 1

解決策に準拠していますが、SOポリシーに従って、回答の投稿コードはリンクされたリソースが利用できなくなった場合でも有効なままであるため、単純なリンクよりも優先されます。このテクニックの詳細な説明については、CSS-Tricksの記事を読んでください。

::-webkit-scrollbar { 
 
    width: 1px; 
 
    height: 1px; 
 
} 
 

 
::-webkit-scrollbar-button { 
 
    width: 1px; 
 
    height: 1px; 
 
} 
 

 
body { 
 
    background: #111; 
 
} 
 

 
div { 
 
    box-sizing: border-box; 
 
} 
 

 
.horizontal-scroll-wrapper { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vh; 
 
    max-height: 100vw; 
 
    margin: 0; 
 
    padding-top: 1px; 
 
    background: #abc; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    -webkit-transform: rotate(-90deg) translateY(-100vh); 
 
      transform: rotate(-90deg) translateY(-100vh); 
 
    -webkit-transform-origin: right top; 
 
      transform-origin: right top; 
 
} 
 
.horizontal-scroll-wrapper > div { 
 
    display: block; 
 
    padding: 5px; 
 
    background: #cab; 
 
    -webkit-transform: rotate(90deg); 
 
      transform: rotate(90deg); 
 
    -webkit-transform-origin: right top; 
 
      transform-origin: right top; 
 
} 
 

 
.squares { 
 
    padding: 100vh 0 0 0; 
 
} 
 
.squares > div { 
 
    width: 100vh; 
 
    height: 100vh; 
 
    margin: 10px 0; 
 
} 
 
.squares>div:last-child { 
 
    margin-bottom: calc(-100vh + 10px); 
 
}

<div class="horizontal-scroll-wrapper squares"> 
 
    <div>item 1</div> 
 
    <div>item 2</div> 
 
    <div>item 3</div> 
 
    <div>item 4</div> 
 
    <div>item 5</div> 
 
    <div>item 6</div> 
 
    <div>item 7</div> 
 
    <div>item 8</div> 
 
</div>