Question

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

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

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

我一直在尝试缓存网格div的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/

OR

您可以使用div滚动条而不是使用身体滚动条，而不需要其他内容。只需添加属性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 );

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

2 个答案: