如果用户向下滚动（水平滚动），则向左滚动

Question

我正在一个水平的网站上工作，当用户向下滚动时，我需要水平滚动。 任何想法如何用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> 

Answer 1

您可以通过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;
}

Answer 2

您可以添加一个滚动事件侦听器，该事件将使用event.preventDefault（）阻止原始行为，并添加您自己的左滚动逻辑：

window.document.addEventListener("scroll", ({preventDefault}) => {
    preventDefault();
    window.scrollTo(/* you need some logic to know where to scroll to */) 
});

Answer 3

我的项目中有相同的要求。

更新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

Answer 4

可能的解决方案：

 $('.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>