12

我想设计一个水平页面。当我使用鼠标滚轮时，它只是垂直滚动内容。如何通过鼠标滚轮使用水平滚动？CSS 是否支持此属性？

例如任何这样的事情：

mouse-wheel:horizontal;

我不想要 jQuery 解决方案。

4

7 回答 7

36

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

于 2016-07-15T11:31:07.607 回答
27

将容器旋转 –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 的文章；他还列出了浏览器兼容性。

于 2016-09-19T12:43:46.520 回答
19

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

于 2013-08-28T07:15:38.313 回答
4

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

于 2013-11-19T00:41:36.493 回答
4 
var item = document.getElementById("MAIN");

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

"MAIN"你的容器在哪里

于 2021-04-02T09:53:39.183 回答
-3

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

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

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

于 2013-08-28T07:17:28.310 回答
-4

你不能只用 CSS 来实现这一点，你需要为此使用 Jquery。下面是使用 jquery 实现水平滚动的示例链接。

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

于 2013-08-28T07:17:07.633 回答