滚动行为: Chrome中的<html />不起作用
我试图替换一个JavaScript平滑卷轴：
document.getElementById('my-element').scrollIntoView({ behavior: 'smooth' });使用scroll-behavior: smooth的CSS
然而，在我的例子中，“溢出”元素是标记。
当我不加
html {
scroll-behavior: smooth;
}对于我的CSS来说，点击指向元素的链接很好，因为页面实际上滚动到了相关的元素。但滚动当然不是“平稳”的。
但是，当我添加上面的CSS片段并单击我的<a href="#my-element" />链接时。它一点也不滚动。
一旦我移除scroll-behavior: smooth，它又开始工作了.
有趣的是，这似乎只是铬的一个问题。当我将滚动行为添加到html标记时，Firefox和Safari都会顺利滚动。但它完全破坏了Chrome中链接的功能。
然后，我尝试将一个overflow-y: scroll; scroll-behavior: smooth;和一个设置的高度添加到一个容器中，该容器包围了我想要滚动的元素，并且已经工作了！任何在容器内使用href的滚动都变得平滑了✅..。这也证实了我所拥有的不是浏览器或操作系统设置，而是禁用了我的平滑滚动。
这个功能对我很有用！只是不适用于标签。
不过，我不想让我的容器成为滚动条所在的那个。
如何让scroll-behavior: smooth在这个级别上工作？
我的html样式非常简单，我找不到任何应该干扰滚动行为的东西：
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
}我也尝试将滚动行为移动到<body />，但这也不起作用。
我特别尝试给我的html标记一个overflow-y: scroll。但这没什么区别。
为了进行健康检查，我也尝试了scroll-behavior: smooth !important;，但也是一样的。
最后，我还试图补充如下：
* {
scroll-behavior: smooth;
}正如我所看到的一些评论提到了这一点。但这也不起作用。
回答 2
Stack Overflow用户
发布于 2022-07-20 16:29:43
我发现问题是：
https://bugs.chromium.org/p/chromium/issues/detail?id=1299237&q=scrollIntoView&can=2
这是一个Chrome，如果在一个不相关的滚动框中发生另一个调用或滚动操作，JS函数scrollIntoView({ behavior: smooth })和scroll-behavior: smooth; CSS属性将被取消。
在我的例子中，我有一个旋转木马，它使用滚动来动画在requestAnimationFrame中移动的旋转木马项目。
这个bug导致我的平滑滚动链接被取消在每一个勾选，因为活动滚动动画在更深的页。
这个bug从2022年2月19日开始就被打开了，至今仍未修复，也未引起任何注意。因此，我将不得不重写我的旋转木马逻辑，使用transform: translate代替滚动来解决Chrome用户的这个问题。
Stack Overflow用户
发布于 2022-07-20 15:18:44
下面的片段对你有用吗？
注意，平滑部分在Safari中不起作用，但它仍然跳到底部
html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth }
body { margin: 0 }
img { display: block; max-width: 100% }<h1>Est parturient curae quis.</h1>
<h4>A nisi morbi ullamcorper taciti tempus at a vel suspendisse vestibulum parturient pulvinar eu gravida a lectus senectus.</h4>
<a href="#bottom">Go to bottom</a>
<p>Tempor a vestibulum consectetur sodales condimentum scelerisque luctus aptent eget leo placerat pharetra tempor tincidunt adipiscing quis sem sociosqu est a ac dictum ut bibendum a. Pulvinar vestibulum posuere hac adipiscing facilisis sem suspendisse potenti at erat ultricies accumsan elit a proin condimentum dictum suspendisse senectus ridiculus venenatis. Netus condimentum tellus at est porta est ac ultricies fames a arcu consequat id cubilia adipiscing a posuere.</p>
<img src="https://picsum.photos/1000?random=1">
<p>Adipiscing nunc pretium placerat rhoncus scelerisque ullamcorper proin dictum eu aliquet cubilia sociis vehicula gravida mattis consectetur vestibulum a. Curabitur phasellus a suscipit eros phasellus laoreet fringilla tempus molestie lectus adipiscing felis id ut. Lectus eleifend pulvinar auctor ad a etiam conubia varius a tempus vestibulum suspendisse habitant et eu dolor suspendisse nec lacinia. Nascetur ullamcorper eros sed elit orci a quam nec turpis dui est ullamcorper scelerisque a ligula posuere vestibulum posuere litora diam potenti. Justo condimentum vestibulum nullam a urna suspendisse velit vestibulum id mattis lectus cursus sociosqu quisque nec pretium scelerisque natoque sagittis ac litora sagittis erat a. Adipiscing justo per dapibus consectetur massa dolor curae suspendisse cum a scelerisque quisque a adipiscing duis a rhoncus proin accumsan odio penatibus fermentum fringilla orci est potenti viverra parturient.</p>
<p>Mus ad ullamcorper vestibulum adipiscing condimentum a nam id ut sociosqu quam eu convallis a a elit sed ullamcorper lacus auctor. Dapibus quis elementum ullamcorper id sed luctus suspendisse condimentum fames ut at convallis magna nec litora a ultricies bibendum ullamcorper velit a in. A nostra parturient suscipit condimentum ac leo diam parturient a metus nullam diam suspendisse volutpat a habitasse mi vitae suscipit nullam cursus suspendisse a leo parturient litora. Vulputate porta at ad eu est parturient nam vivamus nibh urna primis parturient senectus parturient fusce habitasse consequat nam euismod malesuada a.</p>
<img src="https://picsum.photos/1000?random=2">
<p>Arcu duis condimentum a nisi metus a turpis vestibulum vel tristique a dignissim vel penatibus adipiscing nisi fermentum eleifend parturient integer at ipsum parturient arcu nunc a eu. Turpis adipiscing urna mi accumsan leo laoreet arcu nec lectus velit a egestas condimentum primis sem tempor sociis scelerisque amet duis vestibulum nibh nisi a conubia. Tincidunt scelerisque mi a a suspendisse convallis eu elit bibendum magna tempor consequat a enim a ac. Arcu suspendisse penatibus posuere aenean lacinia condimentum dignissim phasellus nisl ut pulvinar nunc a fermentum adipiscing fermentum nisl maecenas consectetur fusce.</p>
<p>A fusce nunc metus mattis habitant parturient urna cras nullam est ut eu erat elementum morbi eget scelerisque scelerisque consectetur. Condimentum condimentum ad sed mollis consectetur mattis vitae commodo facilisi facilisi laoreet cubilia nam vel parturient mi scelerisque rhoncus ligula netus parturient. Vestibulum parturient a adipiscing vestibulum eget massa arcu a a torquent suscipit senectus hac libero cubilia elit vestibulum.</p>
<div id="bottom"></div>
https://stackoverflow.com/questions/73052119
复制相似问题
腾讯云开发者
