Pure CSS Horizontal Scroll with Mouse Wheel

Author
In Articles Last updated Dec 21, 2016
Pure CSS Horizontal Scroll with Mouse Wheel

If you need to create series of products which are Horizontal Scroll with the mouse wheel, then you need to reply on javascript instead of CSS. You usually end up with Carousel slider, but we have CSS solution for this.

Of course, the products are may be too big to put in a single row. So we need to split them up into different categories, each horizontally scrollable. So the few most prominent product in each category were visible and less important products were still readily available.

To give a smooth user experience, we need to maintain its quality and make it look like any Javascript solution. It also works like any javascript scroller and provides the same user experience.

We talk about CSS then one big question comes in or mind. That is browser support. The answer for this, it’s work very well on modern browser including the latest version of firefox and chrome. As for IE, it works with IE11. It also works with Mobile browsers including Chrome Mobile 52 but didn’t work with Safari Mobile 9.0.

Horizontal Scroll Markup

It’s pretty much easy in fact to do with pure CSS. The solution ended up as following.

  • Define a main container with child items
  • Rotate the container 90 degrees counterclockwise
  • Rotate the items back to correct-side up

Make a div with class name horizontalScroll, and make a bunch of child elements. We also define another extra div called bg where we will define background image.

<div class="horizontalScroll">
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1468014187448-46f9ba8890a2?dpr=1&auto=compres)"></div>
</div>
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1466496224275-4cbf790b285b?dpr=1&auto=compres)"></div>
</div>
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1437315306147-0923bdb3fc12?dpr=1&auto=compress)"></div>
</div>
</div>

Styling Scroller

In this example, our side-scrolling container will be 100vh full, with the items of 100vw each. These are arbitrary sizes; they could be anything.

.horizontalScroll {
width: 100vh;
height: 100vw;
overflow-y: auto;
overflow-x: hidden;
background: #2E2E2E;
padding: 30px;
-webkit-transform-origin: right top;
transform-origin: right top;
-webkit-transform: rotate(-90deg) translate3d(0, -100vh, 0);
transform: rotate(-90deg) translate3d(0, -100vh, 0);
}
.horizontalScroll > * {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(90deg) translate3d(0, calc(-100vh + 60px), 0);
transform: rotate(90deg) translate3d(0, calc(-100vh + 60px), 0);
}

Now the children items:

.item {
width: calc(100vh - 60px);
height: calc(100vh - 60px);
background: #FDFFFC;
position: relative;
}
.item:not(:first-child) {
margin-top: 30px;
}

Finally, we will define the background image.

.item .bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: no-repeat center center / cover;
opacity: .8;
background-blend-mode: luminosity;
}

Demo

We have created code pen, Here is demo

See the Pen Pure CSS Horizontal Scroll Experiment by codeconvey (@codeconvey) on CodePen.

Conclusion

According to Can I Use, CSS transforms currently supported by over 93% of users, so there’s no issue there. But make sure that this maybe isn’t ready for production sites. It is tested on some devices but not on all devices, so you need to make sure before using.

The finest trouble is with touch devices that requiring you to swipe up and down to move left and right. A likely solution would be to consist of a message on your website explaining this, but you’d depend upon people surely reading your message. And even then it’d nonetheless be counterintuitive. Any other possible answer would be to seize the touch input with JavaScript on the one’s devices; then you be better off simply doing the entirety in JavaScript and preceding this CSS hack.

This is experimental CSS horizontal Scroll which base on CSS Tricks

Author

Ashfaq Ahmed is a freelance creative front-end and WordPress developer. He develops modern, highly interactive websites with cutting edge technologies. In his spare time, he loves to do blogging and web experiments.

Website: http://reverie-tech.com/

Social Links: