Question

示例：http://kat.isltest.net/col/

此示例网站正在使用chrome。该功能是身体居中，即使它包含1600px的宽div。默认情况下，滚动条以每个窗口大小为中心。

现在，问题是这在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).on('resize', function() {
  /* your code */
});

我想当浏览器窗口的宽度小于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（）和$（＆＃39; body＆＃39;）。scrollLeft（）无法在IE和Firefox中运行

2 个答案: