Question

我目前正在开发一个新的网络项目，这是一个横向滚动投资组合网站。我差不多完成了，只有一段代码不会像它应该的那样工作。

我在屏幕的左上角有一个汉堡菜单，其中包含应该平滑滚动到引用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();
});

你们有没有想过为什么滚动距离如此混乱？

干杯添

滚动后，在水平网站上锚定的scrollLeft变得混乱

0 个答案: