Html 使用css将鼠标滚轮设置为水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18481308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set mouse wheel to horizontal scroll using css
提问by user2586454
I want to design a horizontal page. When I use mouse wheel it just scrolls content vertically. How can I use horizontal scroll by mouse wheel? Does CSS support this property?
我想设计一个水平页面。当我使用鼠标滚轮时，它只是垂直滚动内容。如何通过鼠标滚轮使用水平滚动？CSS 支持这个属性吗？
For example any thing like this:
例如任何这样的事情：
mouse-wheel:horizontal;
I dont want jQuery solutions.
我不想要 jQuery 解决方案。
回答by micjamking
CSS does not support manipulation of mouse or keyboard inputs; input controls can only be manipulated via JavaScript.
CSS 不支持鼠标或键盘输入的操作；输入控件只能通过 JavaScript 进行操作。
回答by panwar
We can scroll the page horizontally by SHIFT key + scroll through mouse.
我们可以通过 SHIFT 键 + 滚动鼠标来水平滚动页面。
回答by Rindra Parama
Rotate the container by –90 degrees, then rotate its child element by 90?degrees.
将容器旋转 –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>See Pieter Biesemans' article on CSS Tricksabout it; he also lists browser compatibility.
参见Pieter Biesemans 关于 CSS Tricks 的文章；他还列出了浏览器兼容性。
回答by Herbert Pimentel
Microsoft IE 10 has a prefixed property, take a look at -ms-scroll-translation... but just to you know... it is not widely supported yet, but still a good idea :(
Microsoft IE 10 有一个带前缀的属性，看看 -ms-scroll-translation ......但只是你知道......它尚未得到广泛支持，但仍然是一个好主意:(
回答by MAR
You can't achieve this with only CSS you need to use Jquery for this. Below is example link where the horizontal scroll was achieved by using jquery.
你不能只用 CSS 来实现这一点，你需要为此使用 Jquery。下面是使用 jquery 实现水平滚动的示例链接。
Example link: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
示例链接：http: //css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
回答by Arun Bertil
CSS does not support manipulation of mouse or keyboard inputs
CSS 不支持操作鼠标或键盘输入
You could use Jquery.Check the following example
你可以使用 Jquery.Check 下面的例子
http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
