滚动快照错误(Mac上的Chrome)-允许向上滚动到HTML空白处

滚动快照错误(Mac上的Chrome)-允许向上滚动到HTML空白处,html,css,google-chrome,Html,Css,Google Chrome,试图找出这是Chrome还是我的代码的错误。使用下面的代码,当我向下滚动时,它会执行我想要的操作,但当我向上滚动时,它可以让我滚动到我想要的高度,而不会使身体反弹。我已经将滚动捕捉应用到html中,因为如果在主体上,它在Chrome中不起作用 演示:(向上滚动) 代码: Chrome滚动快照演示 * { 保证金:0; 填充:0; } html{ 滚动捕捉类型:必填; 滚动捕捉点y:重复(100vh); 滚动捕捉类型:y必填; 背景:红色; } 部分{ 高度:100vh; 宽度:100vw; 滚

试图找出这是Chrome还是我的代码的错误。使用下面的代码,当我向下滚动时,它会执行我想要的操作,但当我向上滚动时,它可以让我滚动到我想要的高度,而不会使身体反弹。我已经将滚动捕捉应用到html中,因为如果在主体上,它在Chrome中不起作用

演示:(向上滚动)

代码:


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;
}