$(window).width() 和 $('body').scrollLeft() 在 IE 和 Firefox 中不工作

Question

样本：http://kat.isltest.net/col/

此示例站点正在 chrome 中运行。功能是主体居中，即使它包含 1600 像素的宽 div。然后滚动条默认居中在每个 window 大小。

现在，问题是这在 IE 和 Firefox 中不起作用。

代码如下：

if ($(window).width() <= 1600) {
    $('body').scrollLeft(0);
}
if ($(window).width() <= 1400) {
    $('body').scrollLeft(110);
}
if ($(window).width() <= 1360) {
    $('body').scrollLeft(130);
}
if ($(window).width() <= 1280) {
    $('body').scrollLeft(170);
}
if ($(window).width() <= 1152) {
    $('body').scrollLeft(235);
}
if ($(window).width() <= 1024) {
    $('body').scrollLeft(300);
}
if ($(window).width() <= 800){
    $('body').scrollLeft(400);
}

你们知道为什么吗？非常感谢！ :)

Answer 1

您需要使用在 window 调整大小时执行的侦听器包装您的代码，否则滚动条只会调整一次：

$(window).on('resize', function() {
  /* your code */
});

我想当浏览器的宽度 window 小于 1600px 时 chrome 将其垂直滚动条调整到中心的原因是默认行为，与您的代码无关。

编辑

此外，如果您希望视口滚动，则需要使用 $(document).scrollLeft() 而不是 $('body').scrollLeft()。

Answer 2

如果您想在单击任何按钮时滚动，则可以使用 jquery 执行以下操作。

$('#next').click(function(event) {
event.preventDefault();
$('.surr-cor').animate({
scrollLeft: "+=1350px"
}, "slow");
});

提及 firefox 的事件，因为它适用于事件。您可以将 .surr-cor 替换为 div 元素或 body

$(window).width() 和 $('body').scrollLeft() 在 IE 和 Firefox 中不工作

$(window).width() and $('body').scrollLeft() not working in IE and Firefox

javascript

jquery

document-body