1

我目前正在开发一个新的 Web 项目，它是一个水平滚动的投资组合网站。我快完成了，只有一段代码不能像预期的那样工作。

我在屏幕左上角有一个汉堡菜单，其中包含应该平滑滚动到引用 id 的锚链接。问题是，一旦您滚动页面，滚动距离就会变得混乱，滚动距离就会完全混乱。

这是该页面的链接：http ://www.timbrack.de/#portfolio

要重现错误，请点击汉堡菜单并单击“关于”，即使关于在投资组合部分的右侧，它也会向后滚动几个像素......

我使用 white-space: 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();
});

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

干杯蒂姆

4

0 回答 0