CSS overflow 问题:使一个 div 中的内容能跟着别的 div 中内容向左右滑动,但不跟着上下滑动

2020-08-31 00:50:42 +08:00
 kkll7766

比如表格中,head 很长,会跟着 tbody 左右移动,但不希望它跟着 tbody 上下移动而是固定在原来的位置 真诚提问,每个回答都会感谢!

2290 次点击
所在节点    CSS
7 条回复
iNaru
2020-08-31 00:56:39 +08:00
position: sticky;
kkll7766
2020-08-31 03:21:19 +08:00
@kkll7766 设置了
position: -webkit-sticky;
position: sticky;
top: 20px;
但是没有反应
kkll7766
2020-08-31 03:39:13 +08:00
parent 已经设置了 overflow, child 的 position sticky 就无效了
alvinbone88
2020-08-31 08:04:29 +08:00
原生的滚动就这样,一个方向设置为 scroll,另一个方向也会设置为 scroll 。不想要这样的效果可以用 js 模拟滚动,相关的库很多
liyang5945
2020-08-31 09:14:17 +08:00
这个我前几天弄过,一个固定表头的表格,也是使用 position: sticky 实现的,可以看看我的写的这篇文章: https://liyangzone.com/2020/08/15/前端 /draggable-fixed-header-table/
liyang5945
2020-08-31 09:16:17 +08:00
kkll7766
2020-08-31 22:01:40 +08:00
@liyang5945 @iNaru @alvinbone88 感谢大家!解决了。要点是 在 th 上设置 position: sticky

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/702690

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX