Question

179

Smooth horizontal scroll bound to mousewheel

rated 0 times [ 181] [ 2] / answers: 1 / hits: 16240 / 12 Years ago, sun, october 21, 2012, 12:00:00

Here is a working example of horizontal scroll with mousewheel, but it does not scroll smoothly. By smoothly I mean like ordinary vertical scroll in Firefox or Opera.

$(function() {

    $(html, body).mousewheel(function(event, delta) {

        this.scrollLeft -= (delta * 30);

        event.preventDefault();

    });

});

(http://brandonaaron.net/code/mousewheel/docs)

I've made a live demo to demonstrate this.
http://jsfiddle.net/Dw4Aj/

I want this scroll to work like the vertical one, both with mousewheel and smoothness.

Can someone help me?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

domeniccolti

Add To Favorites

Follow

Total Points: 276

Total Questions: 98

Total Answers: 93

Location: India

Member since Fri, May 13, 2022

2 Years ago

domeniccolti questions

1 MUI Autocomplete custom options, not showing selected option

Mon, Oct 18, 21, 00:00, 3 Years ago

1 Discord.JS V13 client.on messagecreate not firing

Thu, Oct 14, 21, 00:00, 3 Years ago

1 Using Fetch API to create a Login form

Thu, Jul 15, 21, 00:00, 3 Years ago

1 React JS - How to detect navigator.platform in Next JS

Sat, Oct 24, 20, 00:00, 4 Years ago

1 jsPDF is not defined in javascript

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 12 Years ago uriahw · Accepted Answer

I'm just going to leave this here.

http://jsfiddle.net/Dw4Aj/19/

jQuery(document).ready(function($) {

$(html, body).mousewheel(function(e, delta) { 

    $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint');

    e.preventDefault();

});



});