1

I currently have a page which shows content that horizontally scrolls with two arrows on the left and right of the page. When you click on them in desktop IE, Chrome, and Firefox, the page scrolls half the width of the viewport. However, it only does it once in Edge and not at all in Safari. Is there something I can do about this?

The page is at: http://www.stonecellars.com/our-wines

and the JavaScript code I'm using is:

//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);
});
});

1 Answer 1

0

just add $('html body').animate. worked in my case in edge

1
  • That and a reference to (window).scrollLeft() fixed my problem. Thanks
    – Leon B.
    Jun 13, 2018 at 22:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.