使用css将鼠标滚轮设置为水平滚动

Question

我想设计一个横向页面。当我使用鼠标滚轮时，它只是垂直滚动内容。如何使用鼠标滚轮进行水平滚动？ CSS 支持这个属性吗？

例如任何类似这样的事情：

mouse-wheel:horizontal;

我不需要 jQuery 解决方案。

Answer 1

我们可以通过SHIFT键+鼠标滚动来水平滚动页面。

Answer 2

将容器旋转 –90 度，然后将其子元素旋转 90 度。

.container {
  width: 180px;
  height: 600px;
  overflow-y: scroll;

  transform: rotate(-90deg);
}

.content {
  width: 140px;
  height: 140px;
  margin: 10px;

  background-color: #a8a8df;
  
  transform: rotate(90deg);
}

<div class="container">
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  <div class="content">Content 4</div>
  <div class="content">Content 5</div>
  <div class="content">Content 6</div>
  <div class="content">Content 7</div>
</div>

请参阅 Pieter Biesemans 关于 CSS Tricks 的文章；他还列出了浏览器兼容性。

Answer 3

CSS不支持鼠标或键盘输入的操作；输入控件只能通过 JavaScript 进行操作。

Answer 4

var item = document.getElementById("MAIN");

  window.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) item.scrollLeft += 100;
    else item.scrollLeft -= 100;
  });

哪里

"MAIN"

是你的容器

Answer 5

css中没有这样的样式

div {
  scroll-direction: horizontal;
}

这可能非常方便。但是，你有办法做到这一点
您也可以创建自己的。
使用 JavaScript 轻松实现

const container = document.getElementById("container");
// where "container" is the id of the container
  container.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
// prevenDefault() will help avoid worrisome 
// inclusion of vertical scroll 
    }
    else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  });
// That will work perfectly

或者，如果您喜欢使用 CSS，这将创建容器、旋转它、旋转项目并滚动。
步骤：

1. 创建

   container

   项目并添加 css：

<!------ HTML ------>

<div class="container">
 <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>

/** CSS **/

.container {
  width: 100px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: rotate(-90deg);
  transform-origin: right top;
  transform:rotate(-90deg) translateY(-100px);
}

.container > div {
  width: 100px;
  height: 100px;
  transform: rotate(90deg);
  transform-origin: right top;
}

这对你有帮助吗？

Answer 6

Microsoft IE 10 有一个前缀属性，请查看 -ms-scroll-translation...但您知道...它尚未得到广泛支持，但仍然是一个好主意:(

Answer 7

将其添加到容器中：

onWheel= "this.scrollLeft+=event.deltaY>0?100:-100"

示例：

<div class= "container" onWheel= "this.scrollLeft+=event.deltaY>0?100:-100" >
</div>

Answer 8

CSS 不支持鼠标或键盘输入操作

您可以使用Jquery。查看以下示例

http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Answer 9

仅使用 CSS 无法实现此目的，您需要使用 Jquery。下面是使用 jquery 实现水平滚动的示例链接。

示例链接：http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/