[英]Scroll left if user scroll down ( horizontal scrolling )
我正在一個水平的網站上工作,當用戶向下滾動時,我需要水平滾動。 任何想法如何用javascript做到這一點?
這是小提琴: https : //jsfiddle.net/erqbtL23/
這是代碼:
body { margin: 0; height: 100vh; } * { box-sizing: border-box; } .container { overflow-x: auto; white-space: nowrap; } .container>div { background: red; display: inline-block; width: 100vw; height: 100vh; margin-left: -4px; } .container>div:first-child { margin-left: 0; } .container::-webkit-scrollbar { display: none; } .container>div:nth-child(even) { background: blue; }
<div class="container"> <div>scroll left</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> </div>
您可以通過CSS來做到這一點,方法是旋轉容器,使底部變為右側,然后旋轉每個項目以使其正確顯示。
例:
<div class="h-scroll">
<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>
.h-scroll {
width: 100px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
transform-origin: right top;
transform:rotate(-90deg) translateY(-100px);
}
.h-scroll > div {
width: 100px;
height: 100px;
transform: rotate(90deg);
transform-origin: right top;
}
您可以添加一個滾動事件偵聽器,該事件將使用event.preventDefault()阻止原始行為,並添加您自己的左滾動邏輯:
window.document.addEventListener("scroll", ({preventDefault}) => {
preventDefault();
window.scrollTo(/* you need some logic to know where to scroll to */)
});
我的項目中有相同的要求。
更新1:最后包含工作鏈接。
希望這對您有所幫助: 它將與鼠標滾動條一起使用。 當用戶垂直滾動時,水平滾動。
HTML代碼:
<div class="container element_size">
<div>scroll left</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
</div>
CSS代碼:
$finalHeight: 250px;
$finalWidth: 3 * $finalHeight;
$scrollBarHeight: 1px;
::-webkit-scrollbar {
width: $scrollBarHeight;
height: $scrollBarHeight;
}
::-webkit-scrollbar-button {
width: $scrollBarHeight;
height: $scrollBarHeight;
}
body {
background: #111;
}
div {
box-sizing: border-box;
}
.container {
position: absolute;
display: block;
top: 0;
left: 0;
width: calc(#{$finalHeight} + #{$scrollBarHeight});
max-height: $finalWidth;
margin: 0;
padding-top: $scrollBarHeight;
background: #abc;
overflow-y: auto;
overflow-x: hidden;
transform: rotate(-90deg) translateY(-$finalHeight);
transform-origin: right top;
& > div {
display: block;
padding: 5px;
background: #cab;
transform: rotate(90deg);
transform-origin: right top;
}
}
.element_size {
padding: $finalHeight 0 0 0;
& > div {
width: $finalHeight;
height: $finalHeight;
margin: 10px 0;
}
}
這是有效的代碼筆鏈接: https : //codepen.io/anon/pen/KOgGqL
可能的解決方案:
$('.container').bind('DOMMouseScroll', function(e){ if(e.originalEvent.detail > 0) { //scroll down $('.container').animate({ scrollLeft: "+=500px" }, "slow"); console.log('Down'); }else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; }); //IE, Opera, Safari $('.container').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta < 0) { //scroll down $('.container').animate({ scrollLeft: "+=500px" }, "slow"); console.log('Down'); }else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; });
.container { width:200px; overflow:hidden; border:1px solid black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div>scroll left</div> <div>loremloremloremloremloremloremloremloremremloremloremloremremloremloremlorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> <div>lorem</div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.