Question

我有一段时间试图理解然后实现一个有效的滚动方法。

目标： 创建一个大图片查看器/图库。用户在切换菜单中单击箭头键或缩略图以浏览图像。图库和菜单应该跟踪用户正在查看的缩略图。

情况： 我有一个位置：绝对#menu，当你的鼠标悬停在窗口的右边缘时，它会滑动显示。这个#menu有一个孩子#galleryMenu，其溢出：滚动。结果是使用滚轮导航的可滚动菜单。

问题： 每当鼠标悬停在#menu上时，你就会失去你的位置。我不知道如何让#menu留在用户离开的地方。

示例网站链接：http://bahaha.ga/?view=0

我也尝试了一些插件，但他们取消了＃galleryMenu的溢出：滚动并且它会破坏整个#menu。

任何帮助都将不胜感激。

下面是一个更简单/清理过的代码，以帮助传达我的目标/问题。

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"
);

Answer 1

你需要这个。

var tempScrollTop=0;
$(document).on( 'scroll', '#galleryMenu', function(){
    tempScrollTop = $(#galleryMenu).scrollTop();
});
$(document).on( 'hover', '#galleryMenu', function(){
   $(#galleryMenu).scrollTop(tempScrollTop);
});

希望有所帮助

Answer 2

我设法找到了解决方法。使用Jquery的slideUp（）和slideDown（）保持重置#menu的位置（当鼠标悬停在#menu时立即重置）。

我没有使用slideUp（）和slideDown（），而是使用.animate（）将#menu移出屏幕右侧。这使得#menu上的滚动位置更容易跟踪，因为用户暂时徘徊。

Khaleel，感谢代码，但它对我不起作用。但是，我设法获得了一个有效的代码：

//Menu : Scroll to Thumbnail
$("#galleryMenu").animate(
   {scrollTop: $("li:nth-child(<?php echo $currentImage ?>)").offset().top-()},
    500
);

使用UL的LI元素和一点点PHP，我能够抓住包含当前查看图像缩略图的li元素的第n个子元素，以便将其置于#menu的中心。

谢谢大家！

可滚动菜单跟踪问题

2 个答案: