Question

我目前有一个页面，显示在页面左侧和右侧水平滚动两个箭头的内容。当您在桌面IE，Chrome和Firefox中单击它们时，页面会滚动视口宽度的一半。但是，它只在Edge中执行一次，而在Safari中根本不执行。我能做点什么吗？

页面位于：http://www.stonecellars.com/our-wines

我使用的JavaScript代码是：

//Set up arrows
$(document).ready(function() {
    $(".v65-paging").remove(); //remove pagination as it's not needed.

var varietals = $(".varietals").width(); //calculate width of .varietals
var win = $(window).width(); //calculate window width

if (varietals < win) {
    $("#leftArrow, #rightArrow").remove(); //remove arrows if window size is larger
}

// scroll page 50% of the window for each click of the arrows
$("#leftArrow").click(function () {
    var leftPos = $("html").scrollLeft();
    $("html").animate({
        scrollLeft: leftPos - ($(window).width() / 2)
    }, 750);
});

$("#rightArrow").click(function () {
    var leftPos = $("html").scrollLeft();
    $("html").animate({
        scrollLeft: leftPos + ($(window).width() / 2)
    }, 750);
});
});

Answer 1

只需添加$（'html body'）。动画。在我的情况下工作在边缘

水平滚动箭头在Safari和Edge中不起作用

1 个答案: