Set mouse wheel to horizontal scroll using css

问题

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?

For example any thing like this:

mouse-wheel:horizontal;

I dont want jQuery solutions.

回答1:

We can scroll the page horizontally by SHIFT key + scroll through mouse.

回答2:

CSS does not support manipulation of mouse or keyboard inputs; input controls can only be manipulated via JavaScript.

回答3:

Rotate the container by –90 degrees, then rotate its child element by 90 degrees.

.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 Tricks about it; he also lists browser compatibility.

回答4:

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 :(

回答5:

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.

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

回答6:

CSS does not support manipulation of mouse or keyboard inputs

You could use Jquery.Check the following example

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

来源：https://stackoverflow.com/questions/18481308/set-mouse-wheel-to-horizontal-scroll-using-css