网页内容整体偏移

2023-05-31 11:07:27 +08:00
 loveaeen

介绍

兄弟们,小弟想开发一个自用的 chrome extension 。 类似于侧边栏一样的内容,整理如下

场景

为了让侧边栏不遮挡原始网站内容,所以想让网站整体的 body 向右偏移 70px

样式

对 body 采用了多种方案,如:margin-left,left,translateX(70px)

问题

  1. body 样式偏移了,但是某些网站,比如斗鱼,虎牙,youtube ,的左侧导航栏却依然停留在页面最左侧。
  2. 当我采用 translateX(70px) 时,斗鱼,虎牙网站成功便宜,但是 Youtube 的导航栏却因为偏移直接不可见了,而且鼠标移动到视频上预览时,小窗格被再次偏移。

疑问

请问如果遇到这种样式问题,我该如何解决,有通用的解决方案么?

776 次点击
所在节点    前端开发
2 条回复
RRRSSS
2023-05-31 14:38:15 +08:00
Chrome extension 这种就没办法做到通用在所有网站上,因为每个站点的样式都大大不同,尤其是 position 、z-index 这种属性设置得也都不同,你插入的 DOM 被会被网站已有内容盖住。

除非,你在几个热点网站上分辨域名,一个个去做兼容,不过就太费时间了。
sq955
2023-06-12 12:44:54 +08:00
套个 iframe 行吗

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

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

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

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

© 2021 V2EX