I would like to create a horizontal scrolling effect without a scrollbar and instead by hovering over the container. If the mouse is moving right, scroll right and if left then left.

Here's a example on https://lionsgate.com

At the moment my scrolling is working but it's not smooth and it's bugged. I think my event is firing too many times in a row but i don't know how to properly fix this.

Here's my jQuery

var x,y;
var xPrev;
$(".slider-container").mousemove(function(event) {
  var offset = $(this).offset();
  x = event.pageX- offset.left;
  if(xPrev<x) {
     $(this).animate({'scrollLeft': $(this).scrollLeft() + 25}, 100);
     console.log('right');
  }
  else {
     $(this).animate({'scrollLeft': $(this).scrollLeft() - 25}, 100);
     console.log('left');
  }
  xPrev=x;
});

2 Answers

0
Community On

Yes, your guess is true and probably your CPU usage is too high during running your code. you must split your area into sections and on hovering of each, you scroll the page to the specific position. here is a good example and source of doing that:

https://www.jqueryscript.net/demo/jQuery-Scroll-On-Hover-Plugin/

0
Sewer On

Seems like i didn't to enough research. Here's an answer from another thread. Jerky horizontal scroll on hover