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

手机端横向滚动条修复与 postion:sticky 冲突问题

  •  
  •   rizon ·
    othorizon · 2022-07-23 18:57:57 +08:00 · 791 次点击
    这是一个创建于 614 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自适应网页,手机端会导致横向滚动条出现,可以横向移动,这是由于垂直滚动条占用了屏幕位置导致,修复方案

    :root {
        overflow-x: hidden;
    }
    :root body {
        position: absolute;
    }
    body {
        width: 100vw;
        overflow: hidden;
    }
    

    这个方案可以解决这个问题,但是引发另一个问题:

    网页中使用了 position:sticky ,这个要求父元素不能是 position: absolute;

    这下怎么办啊

    3 条回复    2022-08-01 16:32:33 +08:00
    alvinbone88
        1
    alvinbone88  
       2022-07-23 20:31:07 +08:00
    你 body 设置成 overflow: hidden ,页面还能滚动吗
    rizon
        2
    rizon  
    OP
       2022-07-23 20:34:59 +08:00
    @alvinbone88 #1 会导致 position sticky 失效的
    rizon
        3
    rizon  
    OP
       2022-08-01 16:32:33 +08:00
    该问题已解决,是由于页面的一些地方 margin 负数超出了屏幕才出现的横向滚动问题。修复一下就好了。

    并不是所谓的垂直滚动条占用屏幕空间(国内某博文看到的,完全在瞎扯误导了我)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5883 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 06:17 · PVG 14:17 · LAX 23:17 · JFK 02:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.