Reputation: 450

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.

Upvotes: 31

Answers (10)

Renato Salas

Reputation: 11

10 years after, I came with my personal solution:

document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.MAIN'); // .MAIN is a class since I think It could be more useful

    container.addEventListener('wheel', function(event) {
        if (event.deltaY !== 0) {
            event.preventDefault();
            container.scrollLeft += event.deltaY * 1;
        }
    });
});

Upvotes: 1

nyconing

Reputation: 1136

Add this into the container: onWheel= "this.scrollLeft+=event.deltaY>0?100:-100"

Example:

<div class= "container" onWheel= "this.scrollLeft+=event.deltaY>0?100:-100" >
</div>

Upvotes: 3

Obed Amoako

Reputation: 393

There is no style like this in css

div {
  scroll-direction: horizontal;
}

That could have been very handy. But YET, You have a way to do it
You can also create your own.
Easy With JavaScript

const container = document.getElementById("container");
// where "container" is the id of the container
  container.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
// prevenDefault() will help avoid worrisome 
// inclusion of vertical scroll 
    }
    else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  });
// That will work perfectly

Or if you like to do CSS, this will create the container, rotate it, rotate the items, and scroll.
The steps:

Create the container item and add css:

<!------ HTML ------>

<div class="container">
 <div>item 1</div>
 <div>item 2</div>
 <div>item 3</div>
 <div>item 4</div>
 <div>item 5</div>
 <div>item 6</div>
 <div>item 7</div>
 <div>item 8</div>
</div>

/** CSS **/

.container {
  width: 100px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: rotate(-90deg);
  transform-origin: right top;
  transform:rotate(-90deg) translateY(-100px);
}

.container > div {
  width: 100px;
  height: 100px;
  transform: rotate(90deg);
  transform-origin: right top;
}

Does that help you?

Upvotes: 9

Calvin Guillot

Reputation: 211

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

Upvotes: 21

Rindra Parama

Reputation: 622

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.

Upvotes: 45

panwar

Reputation: 1121

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

Upvotes: 67

Herbert Pimentel

Reputation: 41

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

Upvotes: 4