Let me share an issue I'm facing.
I have implemented smoothDivScrolling on my webpage.
The problem is that the scrollable area containing all the items to be scrolled always ends up being larger than the actual content.
When I reach the last item in the scrollable area, it continues scrolling empty. It seems like smoothdivscrolling automatically adjusts the width of the scrollable area to twice the necessary value!
If you need a code snippet for reference:
<figure id='block$id'>
<img src='$img' alt='image $name' />
<h2>$name</h2>
</figure>
These are the items within my
<div class="scrollableArea"></div>
I have multiple such scrollable areas and they are all working as expected.
Here's the CSS for my figure element:
figure {
display:block;
position: relative;
float:left;
vertical-align:top;
width:172px;
height:125px;
// Additional styling properties...
}
The figures are displaying correctly. But I am puzzled as to why the scrollable area is double the size of my content.
CSS for my scrollable area :
div.scrollableArea {
display: block;
position:relative;
float:left;
// Additional styling properties...
}
Even if I provide a width value for the scrollable area, the result remains the same.
Below is the line calling for smoothdivscrolling:
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart",
autoScrollDirection: "backandforth",
autoScrollStep: 2,
autoScrollInterval: 15,
startAtElementId: "startme",
visibleHotSpots: "always"
});
If you require more code snippets for analysis, please let me know. I am eager to resolve this issue.
Thank you