V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sillydaddy
V2EX  ›  React

求助,神奇的 css,为何 overflow 了也没有左右滚动条?

  •  
  •   sillydaddy · 2021-06-22 17:10:40 +08:00 · 2090 次点击
    这是一个创建于 1249 天前的主题,其中的信息可能已经有所发展或是发生改变。

    设置父 div 的 overflow 为 scroll,如果它的子 div 的 left 设置为 100(从右侧 overflow),那么父 div 就有左右滚动条;如果 left 设置为-100(从左侧 overflow)就没有滚动条了。

    这是为什么呢?难道从左侧 overflow 和从右侧 overflow 还有区别吗?(测试了 chrome 和 firefox 都是这样的)


    没有左右滚动条:

    <div style="position:relative; left:400px;overflow:scroll;width:200px;height:200px;background:red">
    
     <div style="position:relative; left:-100px;top:100px;width:200px;height:200px;background:blue">
     </div>
    
    </div>
    

    有左右滚动条(与上面的唯一的区别是 left 由-100px 改为了 100px):

    <div style="position:relative; left:400px;overflow:scroll;width:200px;height:200px;background:red">
    
     <div style="position:relative; left:100px;top:100px;width:200px;height:200px;background:blue">
     </div>
    
    </div>
    
    8 条回复    2021-06-22 18:08:38 +08:00
    fzhyzamt
        1
    fzhyzamt  
       2021-06-22 17:20:40 +08:00   ❤️ 1
    你加上这个试试
    ```html
    div {
    direction: rtl;
    }
    ```
    sillydaddy
        2
    sillydaddy  
    OP
       2021-06-22 17:26:54 +08:00
    @fzhyzamt
    这样就反过来了,left=-100px 有滚动条,left=100px 就没有了。哈哈。
    kop1989
        3
    kop1989  
       2021-06-22 17:31:35 +08:00   ❤️ 1
    没有时间去细翻 CSS Overflow Module Level 3 ( https://drafts.csswg.org/css-overflow-3/#propdef-overflow

    以下说一下我的揣测:
    1 、当默认情况下,html 的左上角为 0,0,而且元素方向是由左到右。
    2 、overflow 应该是针对父容器的元素方向来解释的。换句话说,默认情况下,overflow 的原点是左上角的 0,0 只处理右下方向的溢出。
    3 、同理,当你给一个网页的元素负值时,浏览器的 scrollBar 也不会自动出现(即 0,0 位置不会改变)
    Kenmin
        4
    Kenmin  
       2021-06-22 17:32:15 +08:00   ❤️ 1
    滚动条位置不能为负数……
    kop1989
        5
    kop1989  
       2021-06-22 17:34:24 +08:00
    4 、scrollBar 的起点应该是基于父元素 0,0 而来的。
    Ly0n
        6
    Ly0n  
       2021-06-22 17:40:23 +08:00   ❤️ 1
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

    MDN 文档上说:overflow: scroll; /* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */

    我猜是因为你设置负数,在浏览器解析的时候认为这个元素不在可视范围内了不算是修剪,所有没有滚动条

    ![image.png]( https://i.loli.net/2021/06/22/lPqN4rfDHXJZjL9.png)
    sillydaddy
        7
    sillydaddy  
    OP
       2021-06-22 18:07:11 +08:00
    @kop1989
    @Kenmin
    @cloverliang9721
    应该是这样的
    DL9412
        8
    DL9412  
       2021-06-22 18:08:38 +08:00   ❤️ 1
    根据 https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region 的描述,and the scrollable overflow rectangle is the minimal rectangle whose axes are aligned to the box’s axes and that contains the scrollable overflow area.
    大致意思是可滚动溢出区域是根据盒模型的轴方向计算出的最小矩形?

    然后关于盒模型的轴定义,我只找到了 https://drafts.csswg.org/css-writing-modes-3/#logical-directions,这里面两个 start 的定义就是盒模型的一端,对 end 的定义实在没看懂。

    大致上来说就是盒子的轴在默认情况下就是从左端开始的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   984 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:53 · PVG 03:53 · LAX 11:53 · JFK 14:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.