Javascript 向左滚动定位在水平网站上滚动后会变得混乱

我目前正在做一个新的web项目，这是一个水平滚动的公文包网站。我几乎完成了，只有一段代码无法正常工作

我在屏幕的左上角有一个汉堡菜单，其中包含了一些锚链接，这些锚链接应该可以平滑地滚动到引用的id。问题是，一旦你滚动页面，滚动距离就会被弄乱，滚动距离也会被完全弄乱

以下是该页面的链接：

要重现错误，点击burger菜单并单击“关于”，它只会向后滚动几个像素，即使“关于”在公文包部分的右侧

我使用空格：nowrap使容器水平放置，如下所示：

body {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100%;
  width: auto;
  position: relative;
}

.content_container {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  padding: 100px 100px 100px 100px;
  box-sizing: border-box;
  position: relative;
  min-height: 500px;
  vertical-align:top;
}

用于滚动的脚本如下所示：

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

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

你们知道为什么滚动距离会变得如此混乱吗

干杯

---

Tim

打开我的控制台，键入：$body.scrollLeft，当我在您的公文包部分时，我可以看到JS不认为有任何东西可以滚动。我建议在正文中创建一个固定宽度的容器，并将所有内容放在该容器中。。。然后你的身体将能够滚动。也许现在RAP也能代替固定宽度，但我很怀疑。我找不到汉堡菜单，所以我看不出有什么问题。不过，我建议您永远不要覆盖默认的滚动行为。目前我无法在我的触控板上使用双手指滚动。而且，如果你想让你的网站水平滚动，请不要说这是一个UX反模式-联合国移动这是左-右滑动通常是返回/前进，所以它是在我的MacBook上-如果我向左滚动到边缘，我触发返回在Chrome和Safari中，我不喜欢这样：