Question

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

例如这样的事情：

mouse-wheel:horizontal;

我不想要jQuery解决方案。

Answer 1

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

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’ article on CSS Tricks;他还列出了浏览器兼容性。

Answer 3

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

Answer 4

Microsoft IE 10有一个带前缀的属性，看一下-ms-scroll-translation ...但只是你知道......它还没有被广泛支持，但仍然是一个好主意：（

Answer 5

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

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

其中 "MAIN" 是您的容器

Answer 6

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

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

Answer 7

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

您可以使用Jquery.Check以下示例

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

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

7 个答案: