Within a larger div, I have a very wide inner div that scrolls left and right based on the position of the mouse.
I found the code for this from an answer at
There are two transparent divs above everything else, which capture the mouse position to determine the scrolling speed.
The issue is that anything below these divs becomes unclickable.
Since my inner div has fixed width and height, I thought about calculating the scroll speed based on the mouse's position on the page (e.g., if the page is 620px wide, then 310px is the halfway point)
However, I'm not great at math and struggling to translate this idea into working code.
Does anyone have any suggestions?
Here's how it currently calculates the scrolling rate...
$('.direction', backdrop).mousemove(function(e){
var $this = $(this);
var left = $this.is('.left');
if (left){
var w = $this.width();
rate = (w - e.pageX - $(this).offset().left + 1)/w;
}
else{
var w = $this.width();
rate = -(e.pageX - $(this).offset().left + 1)/w;
}
});
You can see it in action here: