Check out my Fiddle.
I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width for the div.
The issue lies in not knowing how many images will be loaded from the database, making it impossible to use a fixed width for scrolling. How can I resolve this?
I currently use mouse drag for scrolling.
CSS Code:
#timeline {
height: 375px;
margin-top: 10px;
padding: 20px;
overflow: auto;
}
.tl-events {
width: 11800px;
list-style: none;
padding: 0;
margin: 0;
}
.tl-events li {
float: left;
width: 300px;
margin-right: 10px;
}
.tl-events ul {
list-style: none;
margin: 0;
padding: 0;
}
HTML Code:
<div id="timeline">
<ul class="tl-events">
// HTML code here...
</ul>
</div>
JS Code:
$(document).ready(function () {
// JS code here...
});
$(window).mouseout(function (event) {
// More JS code here...
});
What could be causing this issue? Any insights would be greatly appreciated.