переполнение-х: скрытые разрывы гладкой прокрутки

Question

Я использую следующий JavaScript/JQuery скрипт для создания гладкой якорь прокрутки

$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
     event.preventDefault(); 
     var $anchor = $(this); 
     console.log($anchor) 
     $('html,body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
    }); 
}); 

который прекрасно работает, если следующее не входит в мой стилей CSS лист

html,body { 
    /*Irrelevant style rules*/ 
    overflow-x: hidden; 
} 

Почему это происходит? Когда я удаляю или комментирую переполнение-x: hidden ;, скрипт работает отлично. Если я оставлю это, это не сработает.

Answer 1

Чтение первого раздела this work around говорит мне, что у вас не может быть переполнения скрытого и другого видимого. Я добавил несколько JS, чтобы изменить html, body css для события анимации. Хакки, но это работает!

$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
    event.preventDefault(); 
    var $anchor = $(this); 
    $('html,body').css(
    "overflow-x", "visible" 
    ); 
    $('html,body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top 
    }, 1500, 'easeInOutExpo'); 
    $('html,body').css(
     "overflow-x", "hidden" 
    ); 
    }); 
});