I'm having a difficult time grasping the concept and implementing a functional scrolling mechanism.
Objective: Develop a large image viewer/gallery where users can navigate through images by clicking arrow keys or thumbnails in a menu. The gallery and menu should be able to track which thumbnail the user is currently viewing.
Situation: I have a #menu with position:absolute that becomes visible when hovering over the right edge of the window. Within this #menu, there is a child element called #galleryMenu with overflow:scroll applied. This setup allows for scroll navigation within the menu using the mouse wheel.
Issue: Whenever the mouse moves away from the #menu, the scroll position resets. I am struggling to find a way to retain the user's previous scroll position within the #menu.
Sample Website Link:
I have also experimented with plugins, but they interfere with the functionality of #galleryMenu's overflow:scroll property, ultimately disrupting the #menu layout.
Any assistance would be greatly appreciated.
Below is a refined version of the code to better explain my goal and problem.
HTML
<div id="resolution">
<div id="main">
<img />
</div>
<div id="menu">
<div id="galleryMenu">
<ul id="galleryThumbnail">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
CSS
#resolution{
position: absolute;
margin:0;
padding:0;
width: 100%;
height: 100%;
}
#main{
position: absolute;
width: 100%;
height: 100%;
}
#menu{
position: absolute;
display: block;
cursor: pointer;
right: 0;
width: 10px;
}
#galleryMenu{
position: absolute;
display: none;
width: 350px;
right: 0;
overflow: scroll;
}
#galleryThumbnail{
list-style-type: none;
padding: 20px 0 20px 0;
margin: 0;
}
#galleryThumbnail li{
padding: 0;
margin: 0;
}
JQUERY
//Show and Hide Gallery Menu
$("#menu").hover(function(){
$("#galleryMenu").show('slide', {direction: 'right'}, 500);} , function(){
$("#galleryMenu").hide('slide', {direction: 'right'}, 500);}
);
//Set Window Height as Menu Heights
$("#menu").height($(window).height());
$("#galleryMenu").height($(window).height());
// Scroll to Current Thumbnail on Menu
$("#galleryMenu").animate({
scrollTop: $(document).height()-$(window).height()},
1400,
"easeOutQuint"
);