轮换后保持div滚动位置

Question

我有div个完整的缩略图，我已根据移动设备方向使用CSS设置旋转。

问题是，在旋转设备时，div会重新绘制，scroll bar的当前位置会重新设置到列表的开头。

我尝试了几种不同的方法来维护列表的位置。我已经通过以下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);
});

问题是，如果我删除alert，它不起作用，但我无法弄清楚原因。

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.3s的转换..所以你需要超时然后到300ms。玩弄它:)）