rxliuli blog
·
Browser Extension Dev Extra - 如何找到锁定滚动的元素
内容提要
由于多邻国 App 存在 Bug，我考虑使用 Web 版本，但体验不佳且有下载推广弹窗。通过 DevTools 找到弹窗元素，解决了滚动条锁定问题，并递归查找导致锁定的元素。可以通过 CSS 恢复正常滚动，建议开发 Extension 或 UserScript 来改善 Web 体验。
关键要点
-
由于多邻国 App 存在 Bug，考虑使用 Web 版本，但体验差，弹出下载推广。
-
通过 DevTools 找到弹窗元素的选择器，定位页面遮罩。
-
无法自由滚动，需找出导致滚动条锁定的 HTML 元素。
-
滚动条锁定通常通过给 body 元素增加样式实现。
-
可以递归查找元素，找到 overflow: hidden 或 position: fixed 的元素。
-
提供了一个函数 findScrollBlocker 来查找阻止滚动的元素。
-
通过 CSS 恢复正常滚动条，建议开发 Extension 或 UserScript 改善 Web 体验。
延伸解读
Web 版本的用户体验问题
多邻国的 Web 版本在用户体验上存在明显不足，尤其是频繁弹出的下载推广广告。这种干扰不仅影响用户的使用体验，还可能导致用户对产品的整体印象下降。开发者在设计 Web 应用时，应重视用户体验，避免类似问题的出现。
解决滚动条锁定的技巧
通过 DevTools 识别并解决滚动条锁定问题，可以帮助开发者更好地理解页面元素的交互。使用递归查找方法定位阻止滚动的元素，不仅能提升调试效率，还能为后续的开发提供实用的技巧，尤其是在处理复杂的页面布局时。
开发 Extension 或 UserScript 的潜力
文章提到开发 Extension 或 UserScript 的建议，表明了用户可以通过自定义脚本来改善 Web 体验。这不仅能解决特定问题，还能激发开发者的创造力，探索更多 JavaScript 的应用场景，提升个人技能。
延伸问答
如何解决多邻国 Web 版本的滚动条锁定问题？
可以通过递归查找导致滚动条锁定的 HTML 元素，通常是设置了 overflow: hidden 或 position: fixed 的元素。
在多邻国 Web 版本中，如何找到弹窗元素？
可以通过 DevTools 中的 Elements 面板找到弹窗元素的选择器，例如使用 #overlays 选择器。
为什么多邻国 Web 版本体验差？
因为每次打开首页都会弹出 App 下载推广，影响用户体验。
如何通过 CSS 恢复正常的滚动条？
可以使用 JavaScript 函数 findScrollBlocker 找到阻止滚动的元素，然后通过 CSS 修改其样式。
什么是 findScrollBlocker 函数？
findScrollBlocker 函数用于递归查找阻止滚动的 HTML 元素，返回找到的元素。
开发 Extension 或 UserScript 有什么好处？
可以改善 Web 体验，利用 JavaScript 的技巧解决常见问题。
