在查看另一个div时锁定滚动一个div

Question

我正在构建一个本质上是单页网站的网站。

有一个砖石结构的图像网格，当点击一个项目时，一个详细的"面板"从左侧滑入，当这个面板关闭时，它滑出，网格滑回。

然而，当网格返回时，它已经重置了滚动，因此用户需要再次从顶部开始，当网格将包含100个项目时，这可能会很痛苦。

我一直在尝试缓存griddiv的scrollTop，然后将其应用于面板关闭按钮，这样当网格返回视图时，它就会返回到原来的位置。除非函数中添加了超时，否则它似乎不起作用，但这不是我想要的效果。

如果能够在面板显示时锁定网格div，然后在它返回视图后解锁它，那就太好了，有什么可以做到这一点吗？

我把结构的基本细节放在这里http://jsfiddle.net/kxdy3bb5/2/

var $workItems = $(' #workLinks > li '),
    $sectionWork = $(' #workSection '),
    $workPanelsContainer = $('#panels'),
    $workPanels = $workPanelsContainer.children('div'),
    $closeWorkItem = $('div#closeBtn');

// clicking on a work item to show 
$workItems.on('click', function (event) {
    // scale down main section
    $sectionWork.addClass('slide-out');
    // show panel for this work item
    var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']");
    currentWorkPanel = $panel.index();
    $panel.addClass('show-panel');
});
// Close current work item and bring back the list
$closeWorkItem.on('click', function (event) {
    var $currentPanel = $workPanels.eq(currentWorkPanel);
    // alert("THIS WORKS");
    $sectionWork.removeClass('slide-out');
    $workPanels.eq(currentWorkPanel).removeClass('show-panel');
    $('.workWrapper').scrollTop(1000);
});

如有任何帮助或建议，我们将不胜感激。

Answer 1

您可以使用JS属性scrollTop和scrolLeft轻松控制滚动条的位置，但由于转换的原因，您的情况有点不同，您只能在转换完成且列表返回场景后将scrollTop设置为最后一个位置，因此您应该使用transitionend事件。

$sectionWork.on('webkitTransitionEnd', function(e){
if(!$(this).hasClass('slide-out') && bodyScrollTop){
    document.body.scrollTop = bodyScrollTop;
}

看看这个http://jsfiddle.net/e8zb31j2/1/

或

您可以使用div滚动条，而不需要使用body滚动条。只需添加属性height和overflow-y:

#workSection {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    height: 100%;
    overflow-y: auto;
}

http://jsfiddle.net/e8zb31j2/3/

Answer 2

您不需要超时：

http://jsfiddle.net/kxdy3bb5/6/

 $(window).scrollTop( scrollTopRestore );