javascript - 旋转后保持div滚动位置

Question

我有一个充满缩略图的 div，我已将其设置为使用 CSS 根据移动设备方向进行旋转。

问题是，当旋转设备时，div 会重新绘制，并且滚动条 的当前位置会设置回列表的开头。

我尝试了几种不同的方法来维护列表的位置。我对以下 jQuery 代码片段有一些运气:

// record location of scroll for orientation
// change handling:
$('#mapLeft').on('scroll', function() {
    offset.scrollTop = $('#mapLeft').scrollTop();
    offset.scrollLeft = $('#mapLeft').scrollLeft();
});

// detect orientation change and make sure list
// stays in proper location:
$(window).on('orientationchange', function() {
    alert('from orientationchange event');
    $('#mapLeft').scrollTop(offset.scrollLeft);
    $('#mapLeft').scrollLeft(offset.scrollTop);
});

问题是，如果我删除警报，它就不起作用，但我不明白为什么。

1。有谁能够阐明为什么警报似乎对于让处理程序实际滚动回之前设置的位置是必要的？

2。有没有办法可以在不需要愚蠢警报的情况下完成此任务？

我本以为这是一个常见问题，但我还没有找到适合我的解决方案。感谢您提供的任何帮助。

这是 CSS:

@media all and (orientation:landscape) {
    #mapLeft {
        float: left;
        height: 90%;
        margin-left: 1%;
        overflow: auto;
        width: 140px;
    }
}

@media all and (orientation:portrait) {
    #mapLeft {
        overflow-x: scroll;
        overflow-y: hidden;
        height: 140px;
        width: auto;
        white-space: nowrap;
    }
}

Jade HTML 模板:

html
  head
    title #{title}
    meta(name="viewport", content="width = device-width, initial-scale = 1.0")
  body
    .border
    #mapLeft
    #mapRight
    #mapCanvas
    .border

我本以为这是一个常见问题，但我还没有找到适合我的解决方案。感谢您提供的任何帮助。

Answer 1

设置超时或最好尝试在重绘更改后运行滚动函数...例如回调或其他东西:)

我认为你在CSS中可能有一个转换时间可能是0.3秒..所以你需要将超时设置为300毫秒。尝试一下:)