当前位置: 首页 > 知识库问答 >
问题:

溢出大于100VH的CSS滚动抓取点?

濮丁雷
2023-03-14

当容器高于100VH时,我在实现滚动捕捉点时遇到了麻烦。我想使用强制性的抓拍点,但也允许一个用户滚动时,高度大于100VH。

我通过添加额外的对齐点来实现这个功能,我希望用户能够在不对齐的情况下滚动到高于100VH的div顶部。

.parent {
    min-height: 100vh; //actual is taller than 100vh
    scroll-snap-align: start;
}

.child {
    scroll-snap-align: center;
}

我希望能够自然地滚动通过一个高的容器,而不总是折断到滚动的顶部。这种方法在Chrome中是可行的,但在Safari中,任何溢出都会使用户返回到父级的顶部。有没有一种方法可以在高于窗口高度的容器上使用捕捉点,同时可以滚动溢出?

共有1个答案

温亮
2023-03-14

overflow-y:scroll添加到父级。

.parent{
   max-height:100vh;
   overflow-y:scroll;
 }

而且滚动-对齐-对齐也会进入子元素

 类似资料:
  • 问题是当我将页面收缩到某个点时, 元素的顶部溢出,奇怪的是底部没有溢出。说清楚一点,我不想让这两个都溢出来。 这里有一个指向它的JSFiddle链接:https://jsfidle.net/maep468x/1 您将看到,当您运行它并将结果窗口缩小到大约350px时, 元素开始溢出。 我已经尝试从.main-content规则中删除我的line-height和font-size属性,但它仍然溢出。

  • 问题内容: 所以目前我有: 但是,我认为对于某些用户来说,那里有更多的内容是显而易见的。他们可以在不知道我的div实际包含更多内容的情况下向下滚动页面。我使用510px的高度,因此它会截断一些文本,因此在某些页面上看起来确实有更多内容,但这不适用于所有页面。 我使用的是Mac,在Chrome和Safari中,垂直滚动条仅在鼠标悬停在Div上并且您正在滚动时才会显示。有没有办法一直显示它? 问题答案

  • 问题内容: 为什么CSS属性不能在中正常运行,而效果很好? 从CSS规范1,2,我不明白为什么。 问题答案: 我从这里得到了东西! 安德鲁·费多纽克(Andrew Fedoniouk)写道: 这实际上是我的问题:“一个技术原因是溢出属性不适用于表。” -为什么?这是什么原因 我不是专家,但是我相信这只是为了与旧表行为向后兼容。您可以在规范中检查“自动”表布局算法。我很确定该布局算法与溢出属性不兼容

  • 我有固定位置的模态形式。 HTML: JSFiddle

  • 所以我不知道该怎么解释,但我会试着解释的。我有一个评论页面。帖子是一个顶部,下面的评论字段。在这两者的中间是评论。现在的问题是,在几个注释之后,用户最终不得不向下滚动相当多的时间来查看表单。我想做的是显示4个评论,然后当用户向下滚动时,他们会看到更多。只有当他们在评论上滚动时。所以它类似于,但是在div上。这里有更多的信息来可视化它 如果用户在任何注释上滚动,它将像一样滚动,并显示更多注释。所以它

  • 应该修复头部,我不想要整体滚动条,所以我在主体标记中给出了, 我需要垂直滚动条在我的包装div。我怎么才能修好这个? HTML