Hey there! I've been experimenting with the Smooth Div Scroll plugin which you can find on their website here:
The implementation is pretty simple. I'm using the touch example, but with a twist - instead of images, I am using Divs to scroll through.
<div id="makeMeScrollable">
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='item'>Four</div>
<div class='item'>Five</div>
<div class='item'>Six</div>
<div class='item'>Seven</div>
<div class='item'>Eight</div>
<div class='item'>Nine</div>
<div class='item'>Ten</div>
</div>
I have included my js code below:
$(document).ready(function() {
$("#makeMeScrollable").smoothDivScroll({
hotSpotScrolling : false,
touchScrolling : true,
manualContinuousScrolling : false,
mousewheelScrolling : false
});
Here is the accompanying CSS:
.item {
height: 35px;
width: 245px;
}
#makeMeScrollable {
width: 100%;
position: relative;
border: solid 1px black;
margin: 43% 0% 0% 0%;
}
#makeMeScrollable div.scrollableArea div {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
border: black solid 1px;
color: white;
background-color: #1E90FF;
text-align: center;
}
However, I encountered an issue where the tenth div appears to be wrapping around underneath the first one. It seems that the wrapper div created by the scrollable function may be a few pixels too short.
I attempted to manually adjust the size in Chrome Developer tools and it seemed to work. So perhaps dynamically extending the wrapper could solve the problem.
Unfortunately, I am unable to provide a screenshot at this time as I am new to this platform. Any assistance would be greatly appreciated!