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

[前端求助] 同样的代码页面表现不一致

  •  
  •   JustSong · 36 天前 · 2179 次点击
    这是一个创建于 36 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题描述

    我正在重构博客系统的服务端( Express.js + Sequelize )部分,突然发现后台管理页面( React + AntD )的滚动出了问题,侧边导航栏不再固定,滚动时会留白:

    6BDavV.png

    本来我以为是我不小心改了什么东西,结果发现并没有什么值得注意的地方(后台管理页面在项目的 admin 文件夹内): https://github.com/songquanpeng/blog/compare/d58e079...master

    线上版本为:commit d58e079,是没问题的。

    离谱的是,使用 Gitpod 测试该版本( d58e079 ),发现也出现了该问题。

    复现步骤

    git clone https://github.com/songquanpeng/blog
    git checkout d58e079
    npm i
    npm run build # linux
    npm run build2 # windows
    npm start
    

    打开 http://localhost:3000/admin,账户 admin,密码 123456,切换到 Setting tab,选择 Third Party 子 tab,即可发现问题,或者直接把浏览器拉扁,也可发现侧边栏不再固定。

    第 1 条附言  ·  36 天前
    这是最新版本的预览地址:
    https://express-react-blog.herokuapp.com/admin/
    26 条回复    2021-03-16 10:54:03 +08:00
    Justin13
        1
    Justin13   36 天前 via Android
    样式坏了就找找原因修一修啊。。
    JustSong
        2
    JustSong   36 天前
    @Justin13 但是关键点是代码是一样的,这就好离谱啊
    Justin13
        4
    Justin13   36 天前 via Android   ❤️ 1
    @JustSong 得先找到问题点,再说代码一样不一样。很多时候自己以为的和实际的完全两回事。
    JustSong
        5
    JustSong   36 天前
    @KouShuiYu 本地的 dev 和 build 都不行,只有线上的 build 是没问题的
    dingdangnao
        6
    dingdangnao   36 天前
    浏览器缓存?
    seki
        7
    seki   36 天前
    看看 css 加载的顺序
    wuweijia
        8
    wuweijia   36 天前
    在本地打包 生成线上代码 run 起来试试
    JerryCha
        9
    JerryCha   36 天前
    开 f12 对样式进行排查。打包前后的样式可能是两码事。
    JustSong
        10
    JustSong   36 天前
    @dingdangnao 不是这个原因,开了隐私模式也没救
    @seki 这是是一致的(毕竟用的版本是一样的)
    @wuweijia 本地试过了,Gitpod 上也试过了
    JustSong
        11
    JustSong   36 天前
    @JerryCha 现在问题是本地打包前后都是有问题的,2333,而线上的版本没问题
    Augi
        12
    Augi   36 天前 via iPhone   ❤️ 1
    一定是线上和本地最终引用的 css 文件有区别,可能是全局互相覆盖的问题,看下找下少了什么样式呗
    liyang5945
        13
    liyang5945   36 天前   ❤️ 1
    滚动的问题,content-area 元素太高了, ant-layout 设置 overflow: auto 即可
    trolifeyu
        14
    trolifeyu   36 天前   ❤️ 1
    不是侧边栏没固定,而是 table 部分超出父元素了
    SakuraKuma
        15
    SakuraKuma   36 天前   ❤️ 1
    你侧边栏不是 relative 的吗 固定啥??
    JustSong
        16
    JustSong   36 天前
    @liyang5945
    @trolifeyu 我最大的疑惑在于为啥之前和线上的没这个问题,明明我也没改样式相关的代码呀
    @SakuraKuma 我是想描述侧边栏随页面滚动的这个行为哈
    SakuraKuma
        17
    SakuraKuma   35 天前
    @JustSong ? relative 不就是会随页面滚动吗, 又没有 fixed
    JustSong
        18
    JustSong   35 天前
    @SakuraKuma 这里用的 Antd 的默认样式,正常来说侧边导航栏是不会随页面滚动的,我并没有改这里的样式
    jymsy
        19
    jymsy   35 天前   ❤️ 1
    sider 上有个 height 100%, 去掉吧?
    vivipure
        20
    vivipure   35 天前   ❤️ 1
    找到.ant-layout-content 加个 overflow: auto
    silk
        21
    silk   35 天前   ❤️ 1
    ant-layout ant-layout-has-sider 去掉高度
    SakuraKuma
        22
    SakuraKuma   35 天前   ❤️ 1
    @JustSong 因为你的"正常来说"不正常:doge , 没人设计导航栏会默认固定, 你可以套个 affix 试试.
    DoodleSit
        23
    DoodleSit   35 天前   ❤️ 1
    ant-layout-has-sider

    overflow:hidden

    ======

    ant-layout-content

    overflow:auto
    ccnotfound
        24
    ccnotfound   35 天前   ❤️ 1
    右边 content 高度超过了屏幕高度 设置右边内容滚动就可以了
    .ant-layout-content{
    overflow-y: auto;
    }
    angusun
        25
    angusun   35 天前   ❤️ 1
    如果不同环境下表现不一致,要不就是动了代码,要不就是动了依赖。
    faceRollingKB
        26
    faceRollingKB   35 天前   ❤️ 1
    可能是本地安装依赖的时候更新了依赖版本,跟上次构建时依赖不同导致的

    如果可以找到线上版本构建的依赖版本,本地固定 version 测一下应该就能复现
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2807 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:43 · PVG 12:43 · LAX 21:43 · JFK 00:43
    ♥ Do have faith in what you're doing.