Rectangle 27 3

If you want something that works on all of them then you need to do it on your side. There are multiple implementations of smooth scrolling for jQuery.

And actually you may even need so called kinetic scrolling. If so try jquery.kinetic

Thank you but this is not what I want, even not close. I just want horizontal scroll to work like the original one vertical scroll in Firefox or Opera.

Since you're doing it programatically, it most likely won't work like the native controls.

@Vladimir Mikhalev As I said smooth scrolling is a browser specific feature. Google Chrome for example does not use smooth scrolling at all. So if you want to see smooth scrolling there and in all others and in the same manner you have to implement this manually or use some existing library for that.

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 2

1st i think about it is to remember last scroll event timestamp, play with easing function, to get good result http://jsfiddle.net/oceog/Dw4Aj/13/

$(function() {

 $("html, body").mousewheel(function(event, delta) {
   var mult = 1;
   var $this = $(this);
   if (event.timeStamp - $this.data('oldtimeStamp') < 1000) {
     //calculate easing here
     mult = 1000 / (event.timeStamp - $this.data('oldtimeStamp'));
   }
   $this.data('oldtimeStamp', event.timeStamp);
   this.scrollLeft -= (delta) * mult;
   event.preventDefault();
 });
});

Did you perchance test your demo in chrome? Not working for me.

any error in the console ?

None. The only thing I can really determine is that scrollLeft sometimes doesn't get set.

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 1

Try to use your function in conjunction with .animate()

$(function() {
    $("html, body").mousewheel(function(event, delta) {
        var scroll_distance = delta * 30
        this.animate(function(){
           left: "-=" + scroll_distance + "px",
        });
        event.preventDefault();
    });
});

I just actually did this myself and it works. I created an instagram feed on the web application that I created, and the other plugins that I was using were breaking all too often:

$('#add_instagram').on('mousewheel', function(e,d){
    var delta = d*10;
    $('#move_this').animate({
        top: "-=" + delta + "px"
    },3);
    e.preventDefault();
});

Not working both ways, now it says "animate is not a function"

Ok... Do $(this) instead of just "this"

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

This is not an answer (yet) but I've noticed that a large number of windows machines come with scroll wheels that "click", line-by-line, down the page.

I'm not sure if this is the issue you are facing but all of those beautiful parallax effects that work really well with expensive mice and those super-smooth Apple trackpads and mice, but then suddenly shudder and look awful on stock windows mice.

javascript - jQuery Parallax Image Not Smooth When Scrolling With Mous...

javascript jquery css scroll parallax
Rectangle 27 0

I found other nice solution - to use wrapper, so you scroll absolute to same position as you would to scroll vertical, it works if you just need scroll, no text selection or other(may be can work arounded, but i tired)

$(function() {

 var scroll = $('.scrollme');
 var h = scroll.parent().height();
 var w = scroll.parent().width();
 var t = scroll.offset().top;
 var l = scroll.offset().left;
 var vertscroll_wrap = $("<div>").height(h).width(10000).css('position', 'absolute').css('top', t).css('left', l).css('z-index', 10000).css('opacity', 0.5).css('overflow-y', 'scroll');
 var vertscroll = $('<div>').height(10000).css('width', '100%').css('opacity', 0.5);
 vertscroll_wrap.append(vertscroll);
 $('body').append(vertscroll_wrap);
    vertscroll_wrap.height('100%');
 vertscroll_wrap.scroll(function() {
   $(scroll).parent().scrollLeft($(this).scrollTop());
 });


});

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

Try to use your function in conjunction with .animate()

$(function() {
    $("html, body").mousewheel(function(event, delta) {
        var scroll_distance = delta * 30
        this.animate(function(){
           left: "-=" + scroll_distance + "px",
        });
        event.preventDefault();
    });
});

I just actually did this myself and it works. I created an instagram feed on the web application that I created, and the other plugins that I was using were breaking all too often:

$('#add_instagram').on('mousewheel', function(e,d){
    var delta = d*10;
    $('#move_this').animate({
        top: "-=" + delta + "px"
    },3);
    e.preventDefault();
});

Not working both ways, now it says "animate is not a function"

Ok... Do $(this) instead of just "this"

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

I found other nice solution - to use wrapper, so you scroll absolute to same position as you would to scroll vertical, it works if you just need scroll, no text selection or other(may be can work arounded, but i tired)

$(function() {

 var scroll = $('.scrollme');
 var h = scroll.parent().height();
 var w = scroll.parent().width();
 var t = scroll.offset().top;
 var l = scroll.offset().left;
 var vertscroll_wrap = $("<div>").height(h).width(10000).css('position', 'absolute').css('top', t).css('left', l).css('z-index', 10000).css('opacity', 0.5).css('overflow-y', 'scroll');
 var vertscroll = $('<div>').height(10000).css('width', '100%').css('opacity', 0.5);
 vertscroll_wrap.append(vertscroll);
 $('body').append(vertscroll_wrap);
    vertscroll_wrap.height('100%');
 vertscroll_wrap.scroll(function() {
   $(scroll).parent().scrollLeft($(this).scrollTop());
 });


});

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

var pageH = $(window).innerHeight(); //grab window height
    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            var eTop = $('#parallaxtop').offset().top; //get the offset top of the element
            var myOffset = eTop - $(window).scrollTop(); //determine the offset from window
            if (myOffset > -100 && myOffset < pageH/2) { //if the offset is less than the half of page scroll to the panel
                    $('#parallaxtop').ScrollTo({ //ScrollTo JQuery plugin
                    });
            }
        }, 250)); //this will be calculated 250ms after finishing every scroll
    });

I've used the ScrollTo JQuery plugin for smooth scrolling.

javascript - jQuery- smooth scrolling a parallax page to certain ancho...

javascript jquery html parallax
Rectangle 27 0

jQuery(document).ready(function($) {
$("html, body").mousewheel(function(e, delta) { 
    $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint');
    e.preventDefault();
});

});

This isn't working on Chrome 46. Made small changes but here is an updated version that it's working fine. jsfiddle.net/Dw4Aj/338

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

jQuery(document).ready(function($) {
$("html, body").mousewheel(function(e, delta) { 
    $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint');
    e.preventDefault();
});

});

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

var pageH = $(window).innerHeight(); //grab window height
    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            var eTop = $('#parallaxtop').offset().top; //get the offset top of the element
            var myOffset = eTop - $(window).scrollTop(); //determine the offset from window
            if (myOffset > -100 && myOffset < pageH/2) { //if the offset is less than the half of page scroll to the panel
                    $('#parallaxtop').ScrollTo({ //ScrollTo JQuery plugin
                    });
            }
        }, 250)); //this will be calculated 250ms after finishing every scroll
    });

I've used the ScrollTo JQuery plugin for smooth scrolling.

javascript - jQuery- smooth scrolling a parallax page to certain ancho...

javascript jquery html parallax
Rectangle 27 0

If you want something that works on all of them then you need to do it on your side. There are multiple implementations of smooth scrolling for jQuery.

And actually you may even need so called kinetic scrolling. If so try jquery.kinetic

Thank you but this is not what I want, even not close. I just want horizontal scroll to work like the original one vertical scroll in Firefox or Opera.

Since you're doing it programatically, it most likely won't work like the native controls.

@Vladimir Mikhalev As I said smooth scrolling is a browser specific feature. Google Chrome for example does not use smooth scrolling at all. So if you want to see smooth scrolling there and in all others and in the same manner you have to implement this manually or use some existing library for that.

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

1st i think about it is to remember last scroll event timestamp, play with easing function, to get good result http://jsfiddle.net/oceog/Dw4Aj/13/

$(function() {

 $("html, body").mousewheel(function(event, delta) {
   var mult = 1;
   var $this = $(this);
   if (event.timeStamp - $this.data('oldtimeStamp') < 1000) {
     //calculate easing here
     mult = 1000 / (event.timeStamp - $this.data('oldtimeStamp'));
   }
   $this.data('oldtimeStamp', event.timeStamp);
   this.scrollLeft -= (delta) * mult;
   event.preventDefault();
 });
});

Did you perchance test your demo in chrome? Not working for me.

any error in the console ?

None. The only thing I can really determine is that scrollLeft sometimes doesn't get set.

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

this.scrollLeft -= (delta * 30);
this.scrollLeft -= (delta * 1);

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

This is not an answer (yet) but I've noticed that a large number of windows machines come with scroll wheels that "click", line-by-line, down the page.

I'm not sure if this is the issue you are facing but all of those beautiful parallax effects that work really well with expensive mice and those super-smooth Apple trackpads and mice, but then suddenly shudder and look awful on stock windows mice.

javascript - jQuery Parallax Image Not Smooth When Scrolling With Mous...

javascript jquery css scroll parallax
Rectangle 27 0

If you want something that works on all of them then you need to do it on your side. There are multiple implementations of smooth scrolling for jQuery.

And actually you may even need so called kinetic scrolling. If so try jquery.kinetic

Thank you but this is not what I want, even not close. I just want horizontal scroll to work like the original one vertical scroll in Firefox or Opera.

Since you're doing it programatically, it most likely won't work like the native controls.

@Vladimir Mikhalev As I said smooth scrolling is a browser specific feature. Google Chrome for example does not use smooth scrolling at all. So if you want to see smooth scrolling there and in all others and in the same manner you have to implement this manually or use some existing library for that.

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

your code fires lots of actions when scrolling... using the stop function over and over again just to start another animation 1ms later.... raise a flag whenever the animation is still playing

if (animate) return;

 $($.browser.webkit ? 'body' : 'html').stop().animate({
    scrollTop: $scrollTop + 'px'
 }, 3000, 'easeOutQuint', function() 
 {
    animate = false;
    wheel = false;
 });
 animate = true;

jquery - (Javascript) Smooth scrolling mousewheel - Stack Overflow

javascript jquery smooth-scrolling
Rectangle 27 0

this.scrollLeft -= (delta * 30);
this.scrollLeft -= (delta * 1);

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

jQuery(document).ready(function($) {
$("html, body").mousewheel(function(e, delta) { 
    $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint');
    e.preventDefault();
});

});

This isn't working on Chrome 46. Made small changes but here is an updated version that it's working fine. jsfiddle.net/Dw4Aj/338

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel
Rectangle 27 0

1st i think about it is to remember last scroll event timestamp, play with easing function, to get good result http://jsfiddle.net/oceog/Dw4Aj/13/

$(function() {

 $("html, body").mousewheel(function(event, delta) {
   var mult = 1;
   var $this = $(this);
   if (event.timeStamp - $this.data('oldtimeStamp') < 1000) {
     //calculate easing here
     mult = 1000 / (event.timeStamp - $this.data('oldtimeStamp'));
   }
   $this.data('oldtimeStamp', event.timeStamp);
   this.scrollLeft -= (delta) * mult;
   event.preventDefault();
 });
});

Did you perchance test your demo in chrome? Not working for me.

any error in the console ?

None. The only thing I can really determine is that scrollLeft sometimes doesn't get set.

javascript - Smooth horizontal scroll bound to mousewheel - Stack Over...

javascript jquery scroll mousewheel