Horizontal Scrolling auf Seite oder unten scrollen

Question

So erstellte ich eine Website mit https://css-tricks.com/examples/HorzScrolling/, die nicht mehr in der neuesten Version von Chrom funktioniert. Ich finde keinen anderen Weg, dies nachzuahmen. Was ist die effektivste Art, eine Website zu erstellen, die auf dem Desktop oder auf Mobilgeräten nach oben oder auf der Seite scrollt?

Answer 1

Lösung angepasst von this CSS tricks post, aber nach SO-Richtlinie, Buchungscode in Antworten wird zu einfachen Links vorgezogen, da dies bedeutet, dass die Antwort auch dann gültig bleibt, wenn die verknüpfte Ressource nicht mehr verfügbar ist. Für detaillierte Erklärungen zu dieser Technik lesen Sie den Beitrag auf 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>