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