具有空格的水平网站上的scrollLeft：nowrap不起作用

Question

我遇到了横向滚动网站的问题。我使用以下代码作为网站包装器：

#site {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 100%;
width: auto;
position:relative;
background: #fff;
}

和内联所有容器的内联块。一切都很好。当我尝试添加如此平滑滚动的导航时，什么不起作用：

$(document).ready(function() {
$('.scroll').bind('click',function(event){
    var $anchor = $(this);

    $('body, html').animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1200);
    event.preventDefault();
    });
});

我实际上知道，身体并没有真正伸展到内联块元素的宽度，但是我可能没有想到一些调整？当我将#site设置为固定宽度时，它可以工作，但我无法做到这一点，因为该网站是响应式的。

$(document).ready(function() {
$('.scroll').bind('click',function(event){
    var $anchor = $(this);

    $('#site').animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1200);
    event.preventDefault();
    });
});

当我像这样更改功能时，偏移会全部搞砸，具体取决于我当时在网站上的位置。

非常感谢任何帮助。