我有一个页面，其中一个滚动条包含从数据库动态生成的带有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个像素太高了。 有人知道怎么解决吗?
当前回答
我的主要想法是在我们想要滚动到的视图上方创建一个tempDiv。它在我的项目中工作得很好，没有滞后。
scrollToView = (element, offset) => {
var rect = element.getBoundingClientRect();
var targetY = rect.y + window.scrollY - offset;
var tempDiv;
tempDiv = document.getElementById("tempDiv");
if (tempDiv) {
tempDiv.style.top = targetY + "px";
} else {
tempDiv = document.createElement('div');
tempDiv.id = "tempDiv";
tempDiv.style.background = "#F00";
tempDiv.style.width = "10px";
tempDiv.style.height = "10px";
tempDiv.style.position = "absolute";
tempDiv.style.top = targetY + "px";
document.body.appendChild(tempDiv);
}
tempDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
示例使用
onContactUsClick = () => {
this.scrollToView(document.getElementById("contact-us"), 48);
}
希望能有所帮助
其他回答
这适用于我的Chrome浏览器(平滑滚动，没有计时黑客)
它只是移动元素，开始滚动，然后再移动回来。
如果元素已经在屏幕上，则不会出现可见的“弹出”。
pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start'});
targetEle.style.top = top;
targetEle.style.position = pos;
我添加这些css技巧给那些没有解决这个问题的解决方案:
#myDiv::before {
display: block;
content: " ";
margin-top: -90px; // adjust this with your header height
height: 90px; // adjust this with your header height
visibility: hidden;
}
把我的解决方案留在这里，以防有人想达到和我一样的目标。
在我的例子中，错误或通知出现在提交后的页面顶部。(游戏邦注:对于几页滚动来说，页面有点长，在手机上则更长。)
我使用下面的代码片段将错误或通知滚动到视图中。
requestAnimationFrame (() = > errorOrNotification.scrollIntoView ({ Block: 'end'， behavior: 'smooth' }) ）;
Block: 'end'是窍门。根据文档::它反映了alignToTop: false场景。为了融合平滑滚动，我添加了相同的替换。
从本质上讲，它将尝试将元素的底部与可滚动祖先(在我的例子中是窗口)的可见区域的底部对齐。
我的主要想法是在我们想要滚动到的视图上方创建一个tempDiv。它在我的项目中工作得很好，没有滞后。
scrollToView = (element, offset) => {
var rect = element.getBoundingClientRect();
var targetY = rect.y + window.scrollY - offset;
var tempDiv;
tempDiv = document.getElementById("tempDiv");
if (tempDiv) {
tempDiv.style.top = targetY + "px";
} else {
tempDiv = document.createElement('div');
tempDiv.id = "tempDiv";
tempDiv.style.background = "#F00";
tempDiv.style.width = "10px";
tempDiv.style.height = "10px";
tempDiv.style.position = "absolute";
tempDiv.style.top = targetY + "px";
document.body.appendChild(tempDiv);
}
tempDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
示例使用
onContactUsClick = () => {
this.scrollToView(document.getElementById("contact-us"), 48);
}
希望能有所帮助
CSS滚动边距和滚动填充
你可能想看看新的CSS属性滚动填充和滚动边距。可以对滚动容器(在本例中为html)使用滚动填充，对容器内的元素使用滚动边距。
在你的例子中，你想为你想要滚动到视图中的元素添加scroll-margin-top，如下所示:
.example {
scroll-margin-top: 10px;
}
这会影响scrollIntoView代码，如下所示:
const el = document.querySelector(".example");
el.scrollIntoView({block: "start", behavior: "smooth"});
这将导致视口滚动以使视口的上边界与元素的上边界对齐，但有10px的额外空间。换句话说，元素的这些属性被考虑在内:
padding-top border-top scroll-margin-top (而不是margin-top)
此外，如果html元素有滚动填充顶部设置，那么也会考虑这一点。
