使用锚点水平滚动时防止垂直滚动

时间:2021-03-05 15:40:07

标签: css scroll anchor

我有一个单栏网站,有点像社交媒体,帖子在下方。 有些帖子是简单的文字,有些是图片,有些是图片库。

对于这个图片库,我只展示了第一张图片,然后有指向隐藏在视口中的其他图片的锚点(帖子本身是一个 flex 元素,带有 overflow-x:auto 和 flex-wrap:nowrap 以及子图片是 flex: 0 0 auto 和 max-width 以适合我的帖子视图)。

所以提要看起来像这样,其他 x 隐藏了,每个都有所述图片的 ID 来在没有 JS 的情况下进行滚动:
|X |
|X |
|X>||| |X |

我特意在这个项目中避免使用 JS,像这样的画廊工作,但每当我点击所述锚点时,除了水平滚动到所需图像外,它还垂直滚动到目标图像的顶部。

我可以在保持水平滚动的同时防止点击锚点时垂直跳跃吗?

1 个答案:

答案 0 :(得分:0)

如果没有看到您的代码,似乎很难仅使用链接目标来构建纯 CSS 滑块。您可以使用类似于 Chris Coyier's hashtag-links-padding,

的伪元素 :target::before 为目标图像添加偏移量

但也有一个 pure CSS image slider by Avi Kohn 基于使用 inputlabel 的替代方法来实现不跳跃滚动位置的水平图像滑块。