rxliuli blog
·
Browser Extension Dev Extra - 如何找到锁定滚动的元素
💡
原文中文，约1400字，阅读约需4分钟。
📝
内容提要
由于多邻国 App 存在 Bug，我考虑使用 Web 版本，但体验不佳且有下载推广弹窗。通过 DevTools 找到弹窗元素，解决了滚动条锁定问题，并递归查找导致锁定的元素。可以通过 CSS 恢复正常滚动，建议开发 Extension 或 UserScript 来改善 Web 体验。
🎯
关键要点
- 由于多邻国 App 存在 Bug，考虑使用 Web 版本，但体验差，弹出下载推广。
- 通过 DevTools 找到弹窗元素的选择器，定位页面遮罩。
- 无法自由滚动，需找出导致滚动条锁定的 HTML 元素。
- 滚动条锁定通常通过给 body 元素增加样式实现。
- 可以递归查找元素，找到 overflow: hidden 或 position: fixed 的元素。
- 提供了一个函数 findScrollBlocker 来查找阻止滚动的元素。
- 通过 CSS 恢复正常滚动条，建议开发 Extension 或 UserScript 改善 Web 体验。
❓
延伸问答
如何解决多邻国 Web 版本的滚动条锁定问题？
可以通过递归查找导致滚动条锁定的 HTML 元素，通常是设置了 overflow: hidden 或 position: fixed 的元素。
在多邻国 Web 版本中，如何找到弹窗元素？
可以通过 DevTools 中的 Elements 面板找到弹窗元素的选择器，例如使用 #overlays 选择器。
为什么多邻国 Web 版本体验差？
因为每次打开首页都会弹出 App 下载推广，影响用户体验。
如何通过 CSS 恢复正常的滚动条？
可以使用 JavaScript 函数 findScrollBlocker 找到阻止滚动的元素，然后通过 CSS 修改其样式。
什么是 findScrollBlocker 函数？
findScrollBlocker 函数用于递归查找阻止滚动的 HTML 元素，返回找到的元素。
开发 Extension 或 UserScript 有什么好处？
可以改善 Web 体验，利用 JavaScript 的技巧解决常见问题。
➡️
