时间戳

首页 > 解决方案 > 如果用户向下滚动（水平滚动），则向左滚动

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

问题描述

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

标签： javascripthtmlcss

解决方案

您可以仅使用 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;
}

推荐阅读