Javascript 旋转后保持div滚动位置

我有一个

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

我本以为这是一个常见的问题，但我还没有找到一个适合我的解决方案。感谢您提供的帮助。
请设置超时，或者在重新绘制更改后尝试运行滚动功能。。。比如回调之类的：）

我认为你在css中可能有一个0.3秒的转换。。因此，您需要将超时时间设置为300ms。使用它：）
设置超时，或者在重新绘制更改后尝试运行滚动功能。。。比如回调之类的：）

我认为你在css中可能有一个0.3秒的转换。。因此，您需要将超时时间设置为300ms。玩转它：）
你的html代码在哪里？一个愚蠢的建议，看看它是否有效，只有在找不到其他选项时才尝试。给出500毫秒的空白设置超时。这将是不可见的，可能会起作用：-）@AtanuCSE不幸的是，我没有让它与setTimeout一起工作，无论我设置了多长时间的超时时间——甚至是像5000毫秒这样可笑的总数。我不明白警报在做什么，这是如此特殊……你的html代码在哪里？一个愚蠢的建议，看看它是否有效，只有在找不到其他选项时才尝试。给出500毫秒的空白设置超时。这将是不可见的，并且可能会起作用：-）@AtanuCSE不幸的是，我没有让它与设置超时一起工作，无论我设置了多长时间的超时-甚至是像5000毫秒这样可笑的总数。我不明白警报在做什么，这是如此特别…我不确定你在回答的第一部分中的意思，但我确实尝试过在setTimeout（）中包装对.scrollTop和.scrollLeft的调用——不幸的是，无论我设置了多长时间的超时，它似乎都不起作用。也许您可以调用orientationchange complete函数。但还是很奇怪，超时不能解决问题。但是，我认为警报会暂停它，因此滚动函数不会运行并保留旧值。也许您需要在orientationchange函数中手动设置偏移，而不是依赖scolling函数。或者，如果将变量设置为false，以确保scoll函数在定向完成期间不设置新值。这样就可以了。好吧，看来在“OrientionChange”事件处理程序中设置偏移量是可行的！代码如下所示：$（窗口）.on（'orientationchange'，function（）{offset.scrollTop=$（'#mapLeft'）.scrollTop（）；offset.scrollLeft=$（'#mapLeft'）.scrollLeft（）；setTimeout（function（）{$（'#mapLeft'）.scrollTop（offset.scrollLeft）$（'#mapLeft'）。scrollLeft（offset.scrollTop）；}，0）；}）；无论如何，这显然比使用scroll事件要好得多。谢谢你的帮助@rummars欢迎：）如果settimeout设置为0，您可以删除它：PI我不确定您在回答的第一部分中的意思，但我确实尝试过在settimeout（）中包装对.scrollTop和.scrollLeft的调用--不幸的是，不管我设置了多长时间的超时，它似乎都不起作用。也许你可以调用一个orientationchange complete函数。但还是很奇怪，超时不能解决问题。但是，我认为警报会暂停它，因此滚动函数不会运行并保留旧值。也许您需要在orientationchange函数中手动设置偏移，而不是依赖scolling函数。或者，如果将变量设置为false，以确保scoll函数在定向完成期间不设置新值。这样就可以了。好吧，看来在“OrientionChange”事件处理程序中设置偏移量是可行的！代码如下所示：$（窗口）.on（'orientationchange'，function（）{offset.scrollTop=$（'#mapLeft'）.scrollTop（）；offset.scrollLeft=$（'#mapLeft'）.scrollLeft（）；setTimeout（function（）{$（'#mapLeft'）.scrollTop（offset.scrollLeft）$（'#mapLeft'）。scrollLeft（offset.scrollTop）；}，0）；}）；无论如何，这显然比使用scroll事件要好得多。谢谢你的帮助@rummars欢迎：）如果设置为0:P，则可以删除settimeout