常见问题
FAQ

?页面底部内容显示不全/页面底部元素margin不生效。

表现:SmooScroll容器内页面顶部的元素有顶部margin(margin-top)时,页面底部的元素显示不全,视觉上呈现的感觉就是滚动条已经到底,但是页面内容却还没有到底。

原因:SmooScroll容器计算内容高度使用的是offsetHeight,页面顶端和底端的margin不会被计算进页面高度,导致SmooScroll容器高度小于页面实际高度。假设容器内页面第一个元素为含有样式margin: 100px;的<h1>标签时,假设容器内页面底部的内容为高度为200px的footer,那么这个footer底部将会有100px的内容无法滚动出来。

解决:避免在页面顶部的元素中设置顶部margin/在页面底部的元素中设置底部margin。如果需要在顶部或底部创建空白空间,请添加一个height为空白空间高度的空div,或给顶部/底部元素嵌套一个height为元素内容高度+空白空间高度的父元素。

?页内跳转按钮工作异常,跳转后页面滚动错位。

表现:点击页内跳转按钮后,虽然页面跳转到了指定位置,但是滚动条却停在原地,再滚动页面时导致了错误的页面滚动偏移。

原因:使用了href指向页内元素id的跳转方式,导致SmooScroll容器内容直接跳转。这种跳转不会触发滚动条的移动,导致再次滚动时滚动条从错误的位置开始滚动。由于SmooScroll的工作原理是通过检测滚动条的移动距离来对应的移动页面容器,导致滚动条的位置与页面的实际位置产生了错位。
例如,页面高度为1000px,而滚动条在页面顶部时,滚动距离便为0,这时SmooScroll容器也不会移动。而当用户点击了href="#元素id"的按钮跳转到页面500px的位置后,页面内容会直接移动到目标位置,但是这种跳转不会触发滚动条的移动,导致SmooScroll检测到的滚动条移动距离仍然是0。这样的差异导致页面滚动与实际距离偏差了500px,这时再滚动页面,用户则可以往下一直滚动1000px,而页面实际内容只剩下500px了,多出来的部分就产生了错误的空白区域,而如果往上滚动则因为滚动距离为0,导致页面无法向上滚动。

解决:避免使用href指向id这种方式实现页内跳转,使用JavaScrip实现的跳转方法。
下面是一个例子,可以参考使用。*请仔细阅读注释

首先,在含有页内导航按钮的页面内引用这段JavaScript:

// 将 navigate-button 改为你的导航按钮的特有类,如果没有特有类则可以直接给导航按钮添加该类
const buttons = document.querySelectorAll('.navigate-button');
buttons.forEach(button => {
    button.addEventListener('click', function () {
        const targetId = this.dataset.target;
        const targetDiv = document.getElementById(targetId);
        if (targetDiv) {
            const offset = targetDiv.offsetTop;
            window.scrollTo({
                top: offset,
            });
        }
    });
});

然后,移除导航按钮的 href 参数(如果有的话),并添加 data-target 参数,该参数的值为目标元素的id。

<!-- 页内导航按钮 -->
<button class="navigate-button" data-target="目标元素id">按钮文字</button>

<!-- 目标元素 -->
<div id="目标元素id"></div>

?页面整体无法横向滚动。

表现:当页面内容元素超过浏览器窗口宽度时,页面没有横向滚动条,且无法横向滚动。

原因:截止1.1.4版本,SmooScroll暂时还不支持横向滚动。我尝试过添加横向滚动支持,但是由于HTML网页结构的特殊性,即页面基本为纵向布局,导致很多元素实际上是通过margin来居中元素的。除此之外还有很多类似的原因,导致横向滚动不能直接套用纵向滚动的逻辑,在确定SmooScroll容器宽度这方面有些困难。我并不是专业的JavaScript工程师,所以对于这个问题因为我没有相应的需求所以选择了忽略它。

解决:避免内容元素宽度超过100vw。
如果你有能让SmooScroll完美支持横向滚动的方案,请fork SmooScroll仓库后对SmooScroll进行修改,然后提交push申请,我会在确认功能可行后合并分支。