V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
kkll7766
V2EX  ›  CSS

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

  •  
  •   kkll7766 · 2020-08-31 00:50:42 +08:00 · 2054 次点击
    这是一个创建于 1305 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    7 条回复    2020-08-31 22:01:40 +08:00
    iNaru
        1
    iNaru  
       2020-08-31 00:56:39 +08:00   ❤️ 1
    position: sticky;
    kkll7766
        2
    kkll7766  
    OP
       2020-08-31 03:21:19 +08:00
    @kkll7766 设置了
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    但是没有反应
    kkll7766
        3
    kkll7766  
    OP
       2020-08-31 03:39:13 +08:00
    parent 已经设置了 overflow, child 的 position sticky 就无效了
    alvinbone88
        4
    alvinbone88  
       2020-08-31 08:04:29 +08:00 via Android   ❤️ 1
    原生的滚动就这样,一个方向设置为 scroll,另一个方向也会设置为 scroll 。不想要这样的效果可以用 js 模拟滚动,相关的库很多
    liyang5945
        5
    liyang5945  
       2020-08-31 09:14:17 +08:00   ❤️ 1
    这个我前几天弄过,一个固定表头的表格,也是使用 position: sticky 实现的,可以看看我的写的这篇文章: https://liyangzone.com/2020/08/15/前端 /draggable-fixed-header-table/
    liyang5945
        6
    liyang5945  
       2020-08-31 09:16:17 +08:00
    kkll7766
        7
    kkll7766  
    OP
       2020-08-31 22:01:40 +08:00
    @liyang5945 @iNaru @alvinbone88 感谢大家!解决了。要点是 在 th 上设置 position: sticky
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4674 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 10:03 · PVG 18:03 · LAX 03:03 · JFK 06:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.