Was Javascript-Code muss ich hinzufügen, um dieses Div Scroll horizontal zu machen?

Question

Ich habe diese Seite mit drei Abschnitte die volle Breite und Höhe haben, aber ich weiß nicht, wie sie horizontal und nicht vertikal, ich diese Quelle versucht zu machen, blättern: CSS-tricks: Horizontal scrolling aber es funktioniert nicht auf meinem Code ...

Hier ist mein Code:

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    display: flex; 
 
} 
 
.element { 
 
    flex: 0 0 100%; 
 
} 
 
.element1 { background: pink; } 
 
.element2 { background: lightgreen; } 
 
.element3 { background: lightblue; }

<div class="element element1">Element #1</div> 
 
<div class="element element2">Element #2</div> 
 
<div class="element element3">Element #3</div>

Answer 1

Die horizontale Durchlauf ändern wie erwartet funktioniert, benutzen Sie bitte den nachfolgenden Code überprüfen. Von Ihrer Referenz verwendet die Demo ein jquery-Plugin. Sie müssen jQuery und jQuery Mousewheel Plugin für die Arbeit mit einschließen. :)

$(function() { 
 

 
    $("body").mousewheel(function(event, delta) { 
 

 
     this.scrollLeft -= (delta * 30); 
 
    
 
     event.preventDefault(); 
 

 
    }); 
 

 
});

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    display: flex; 
 
} 
 
.element { 
 
    flex: 0 0 100%; 
 
} 
 
.element1 { background: pink; } 
 
.element2 { background: lightgreen; } 
 
.element3 { background: lightblue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script> 
 

 
<div class="element element1">Element #1</div> 
 
<div class="element element2">Element #2</div> 
 
<div class="element element3">Element #3</div>

Answer 2

Sie müssen nur Körper Stil

body { 
    margin: 0; 
    display: block; 
} 

Answer 3

Ich glaube, Sie könnten einige js Dateien auf Ihrer Seite fehlen. Stellen Sie sicher,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script> 
<script> 
$(function(){ 
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>"); 
    $(".post").wrap("<td></td>"); 
    $("body").mousewheel(function(event, delta) { 
     this.scrollLeft -= (delta * 30); 
     event.preventDefault(); 
    }); 
}); 
</script> 

Hier ist ein JSFiddle mit einem Arbeitsbeispiel
https://jsfiddle.net/ybvsyt0p/

Answer 4

Ich denke, mit JavaScript zusammen mit Ihrem CSS hinzufügen die „horizontale Scroll-Effekt“ erzeugen Sie brauchen: definieren HTML UND KÖRPER Als Selektoren verwenden Sie eine Basismethode wie "mousewheel" und beachten Sie die Platzierung und den Umfang von this, da es über das Mausrad auf das übergeordnete Objekt (die Seite) verweist. delta können mit Werten zu arbeiten, die mit der Benutzer-Interaktion und scrollleft ist eine Eigenschaft in CSS 2 und ein Verfahren in CSS 3 (Dh, scrollLeft() funktioniert in den meisten Browsern.

$("html, body").mousewheel(
     function 
       (event, delta) { 
         this.scrollLeft *= -30; 
       } 
)