Set mouse wheel to horizontal scroll using css

Question

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.

Answer 1

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

Answer 2

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

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

Where "MAIN" is your container