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

2021-03-15 10:06:53 +08:00
 JustSong

问题描述

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

本来我以为是我不小心改了什么东西,结果发现并没有什么值得注意的地方(后台管理页面在项目的 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,即可发现问题,或者直接把浏览器拉扁,也可发现侧边栏不再固定。

3642 次点击
所在节点    React
27 条回复
Justin13
2021-03-15 10:28:23 +08:00
样式坏了就找找原因修一修啊。。
JustSong
2021-03-15 10:56:55 +08:00
@Justin13 但是关键点是代码是一样的,这就好离谱啊
KouShuiYu
2021-03-15 11:33:07 +08:00
Justin13
2021-03-15 11:36:05 +08:00
@JustSong 得先找到问题点,再说代码一样不一样。很多时候自己以为的和实际的完全两回事。
JustSong
2021-03-15 11:36:12 +08:00
@KouShuiYu 本地的 dev 和 build 都不行,只有线上的 build 是没问题的
dingdangnao
2021-03-15 11:42:01 +08:00
浏览器缓存?
seki
2021-03-15 11:47:05 +08:00
看看 css 加载的顺序
wuweijia
2021-03-15 11:47:55 +08:00
在本地打包 生成线上代码 run 起来试试
JerryCha
2021-03-15 11:52:13 +08:00
开 f12 对样式进行排查。打包前后的样式可能是两码事。
JustSong
2021-03-15 11:53:08 +08:00
@dingdangnao 不是这个原因,开了隐私模式也没救
@seki 这是是一致的(毕竟用的版本是一样的)
@wuweijia 本地试过了,Gitpod 上也试过了
JustSong
2021-03-15 11:53:53 +08:00
@JerryCha 现在问题是本地打包前后都是有问题的,2333,而线上的版本没问题
Augi
2021-03-15 12:03:21 +08:00
一定是线上和本地最终引用的 css 文件有区别,可能是全局互相覆盖的问题,看下找下少了什么样式呗
liyang5945
2021-03-15 12:08:34 +08:00
滚动的问题,content-area 元素太高了, ant-layout 设置 overflow: auto 即可
trolifeyu
2021-03-15 12:10:05 +08:00
不是侧边栏没固定,而是 table 部分超出父元素了
SakuraKuma
2021-03-15 12:35:15 +08:00
你侧边栏不是 relative 的吗 固定啥??
JustSong
2021-03-15 12:39:33 +08:00
@liyang5945
@trolifeyu 我最大的疑惑在于为啥之前和线上的没这个问题,明明我也没改样式相关的代码呀
@SakuraKuma 我是想描述侧边栏随页面滚动的这个行为哈
SakuraKuma
2021-03-15 12:43:37 +08:00
@JustSong ? relative 不就是会随页面滚动吗, 又没有 fixed
JustSong
2021-03-15 12:53:43 +08:00
@SakuraKuma 这里用的 Antd 的默认样式,正常来说侧边导航栏是不会随页面滚动的,我并没有改这里的样式
jymsy
2021-03-15 13:39:50 +08:00
sider 上有个 height 100%, 去掉吧?
vivipure
2021-03-15 13:43:47 +08:00
找到.ant-layout-content 加个 overflow: auto

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

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

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

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

© 2021 V2EX