滚动快照错误(Mac上的Chrome)-允许向上滚动到HTML空白处
试图找出这是Chrome还是我的代码的错误。使用下面的代码,当我向下滚动时,它会执行我想要的操作,但当我向上滚动时,它可以让我滚动到我想要的高度,而不会使身体反弹。我已经将滚动捕捉应用到html中,因为如果在主体上,它在Chrome中不起作用 演示:(向上滚动) 代码:滚动快照错误(Mac上的Chrome)-允许向上滚动到HTML空白处,html,css,google-chrome,Html,Css,Google Chrome,试图找出这是Chrome还是我的代码的错误。使用下面的代码,当我向下滚动时,它会执行我想要的操作,但当我向上滚动时,它可以让我滚动到我想要的高度,而不会使身体反弹。我已经将滚动捕捉应用到html中,因为如果在主体上,它在Chrome中不起作用 演示:(向上滚动) 代码: Chrome滚动快照演示 * { 保证金:0; 填充:0; } html{ 滚动捕捉类型:必填; 滚动捕捉点y:重复(100vh); 滚动捕捉类型:y必填; 背景:红色; } 部分{ 高度:100vh; 宽度:100vw; 滚
Chrome滚动快照演示
* {
保证金:0;
填充:0;
}
html{
滚动捕捉类型:必填;
滚动捕捉点y:重复(100vh);
滚动捕捉类型:y必填;
背景:红色;
}
部分{
高度:100vh;
宽度:100vw;
滚动捕捉对齐:开始;
}
傅先生{
背景颜色:绿色;
}
.酒吧{
背景颜色:蓝色;
}
你们能复制一下吗?如果是的话,你们有什么想法来阻止它吗?我还没有确定这是否是chrome的一个bug,但修复方法是管理overscroll行为(可以在chrome中完成)
他做这项工作。感谢reddit上的/u/Anemina 我还没有确定这是否是chrome的一个bug,但修复方法是管理overscroll行为(可以在chrome中完成) 他做这项工作。感谢reddit上的/u/Anemina 看起来有人已经为HTML持续溢出错误登录了。我也看到过另外一个类似的问题,你可以继续向上滚动,滚动捕捉点没有被使用。所以我认为他们不是问题所在 我能够将
滚动捕捉类型
放在主体
上,这为我修复了演示。铬87
正文{
滚动捕捉类型:y必填;
}
再试一次
我的2美分/想法:我认为在
html
标记上添加滚动快照不是一个好主意。我通常会将我的正文
滚动快照
原型提取到
或其他东西中,使其更像一个组件,而不是一个文档样式。看起来像是有人已经为HTML溢出错误登录了。我也看到过另外一个类似的问题,你可以继续向上滚动,滚动捕捉点没有被使用。所以我认为他们不是问题所在
我能够将滚动捕捉类型
放在主体
上,这为我修复了演示。铬87
正文{
滚动捕捉类型:y必填;
}
再试一次
我的2美分/想法:我认为在
html
标记上添加滚动快照不是一个好主意。我通常会将我的正文
滚动快照
原型提取到
或其他东西中,使其更像一个组件而不是文档样式
<html>
<head>
<title>Chrome Scroll Snap Issue Demo</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
background: red;
}
section {
height: 100vh;
width: 100vw;
scroll-snap-align: start;
}
.foo {
background-color: green;
}
.bar {
background-color: blue;
}
</style>
</head>
<body>
<section class="foo">
</section>
<section class="bar">
</section>
</body>
</html>
body {
overscroll-behavior-y: none;
}