My div contains a horizontal scroll, but its width is smaller than the content inside.
This layout was achieved using CSS
div {
width: 300px;
overflow: auto;
}
div p {
width: 600px;
}
Here is the HTML code:
<div>
<p>
This paragraph contains a very long text that extends beyond the width of the div.
</p>
</div>
I would like to add a scroll listener so that when scrolling down with the mouse, the content moves to the right, and when scrolling up, it moves to the left.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// code for scrolling down
} else {
// code for scrolling up
}
lastScrollTop = st;
});
It seems that $(window).scroll is not triggering.
I have prepared a jsfiddle here: https://jsfiddle.net/t8Lc4pjs/
How can I make sure that the event fires and how can I adjust the scroll movement based on the direction of the mouse scroll?