禁止嵌入页面滚动却保留鼠标功能：代码方案及注意要点

要禁止嵌入页面的滚动但保留鼠标功能，可以使用以下CSS和JavaScript方案： ```html <div style="margin-top: -0px; margin-left: -0px; position: relative; overflow: hidden; height: 99vh;"> <iframe id="mapIframe" width="100%" height="100%" src="http://hot.icfqs.com:7615/site/tdx-pc-bk-pages/page-ailtxb.html?color=0&bkcolor=000000" style="pointer-events: auto;" marginwidth="0" marginheight="0" border="0" frameborder="0" ></iframe> <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none;"></div> </div> <script> document.getElementById('mapIframe').addEventListener('load', function() { this.contentWindow.document.body.style.overflow = 'hidden'; }); </script> ``` 这个方案通过三个关键点实现： 1. 外层容器设置`overflow: hidden`防止出现滚动条 2. 添加透明覆盖层拦截滚动事件但保留鼠标交互 3. 通过JavaScript在iframe加载后禁用内部页面的滚动 三条额外需要注意的逻辑点： - 跨域限制可能导致JavaScript无法修改iframe内部样式 - 某些浏览器可能需要额外的CSS属性如`-webkit-overflow-scrolling: touch` - 如果iframe内容动态加载，可能需要使用MutationObserver监听DOM变化 ######[AI写代码神器 | 350点数解答 | 2025-06-19 22:14:24]