我有一个页面,其中一个滚动条包含从数据库动态生成的带有div的表行。每个表行就像一个链接,有点像你在视频播放器旁边看到的YouTube播放列表。

当用户访问页面时,他们所在的选项应该会转到滚动div的顶部。这个功能正在工作。问题是,这有点太过分了。比如他们的选项高了10像素。因此,页面被访问,url被用来识别选择了哪个选项,然后将该选项滚动到滚动div的顶部。注意:这不是窗口的滚动条,这是一个带有滚动条的div。

我正在使用这段代码,使它移动选中的选项到div的顶部:

var pathArray = window.location.pathname.split( '/' );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

它将它移动到div的顶部,但大约10个像素太高了。 有人知道怎么解决吗?


当前回答

把我的解决方案留在这里,以防有人想达到和我一样的目标。

在我的例子中,错误或通知出现在提交后的页面顶部。(游戏邦注:对于几页滚动来说,页面有点长,在手机上则更长。)

我使用下面的代码片段将错误或通知滚动到视图中。

requestAnimationFrame (() = > errorOrNotification.scrollIntoView ({ Block: 'end', behavior: 'smooth' }) );

Block: 'end'是窍门。根据文档::它反映了alignToTop: false场景。为了融合平滑滚动,我添加了相同的替换。

从本质上讲,它将尝试将元素的底部与可滚动祖先(在我的例子中是窗口)的可见区域的底部对齐。

其他回答

如果它大约是10px,那么我猜你可以简单地手动调整包含div的滚动偏移量,就像这样:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

解决方案,如果你是使用离子电容器,角材料,并需要支持iOS 11。

                document.activeElement.parentElement.parentElement.scrollIntoView({block: 'center', behavior: 'smooth'}); 

关键是滚动到父节点的父节点,也就是输入的包装器。这个包装器包含输入的标签,该标签现在不再被切断。

如果你只需要支持iOS 14,“block”中心参数实际上是有效的,所以这是足够的:

                document.activeElement.scrollIntoView({block: 'center', behavior: 'smooth'}); 

我用,

element.scrollIntoView({ behavior: 'smooth', block: 'center' });

这使得元素在滚动后出现在中心,所以我不需要计算yOffset。

希望能有所帮助……

最简单的方法是,

html, body {
    scroll-behavior: smooth;
}

    html [id], body [id] {
        scroll-margin: 50px !important;
    }

使用您提供的代码

var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.style.scrollMargin = '50px';
el.scrollIntoView(true);

找到了一个变通的解决方案。假设你想滚动到一个div,比如这里的Element,你想在它上面有一个20px的间距。 在上面设置一个已创建的div的ref:

<div ref={yourRef} style={{position: 'relative', bottom: 20}}/> < / >元素

这样做将创建您想要的间距。

如果你有一个标题,在标题后面创建一个空的div,并给它分配一个与标题高度相等的高度并引用它。