背景
在许多移动网站和应用程序中，Google 地图是一个常见的集成组件。但是，如果您想要定制 Google 地图移动端界面并禁用滚动时，有时可能会遇到一些挑战。
本文将介绍如何使用 JavaScript 和 CSS 禁用 Google 地图移动端界面上的滚动，并提供详细的学习资源和示例代码。
步骤
1. 获取嵌入式 Google 地图的 iframe 对象
在你的 HTML 页面中，首先我们需要获取嵌入式 Google 地图的 iframe 对象。可以通过以下方式获取：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386566.51561469037!2d-122.41941550000001!3d37.7749295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807b9a45a35d%3A0xe8e259ed63db337!2sGolden+Gate+Bridge!5e0!3m2!1sen!2sus!4v1438674306256" width="600" height="450" style="border:0" allowfullscreen></iframe>
然后我们可以通过 JavaScript 获取 iframe 对象：
const googleMapFrame = document.querySelector('iframe[src*="google.com/maps"]');
2. 禁用滚动
使用以下 CSS 样式来禁用 iframe 元素内的滚动：
iframe[src*="google.com/maps"] { pointer-events: none; overflow-x: hidden; overflow-y: hidden; }
这将禁用 Google 地图移动端界面中的所有滚动。但是，如果您希望允许某些元素在 Google 地图内进行滚动（例如信息窗口），则需要选择性地启用滚动。
下面的示例代码演示如何指定可以滚动的元素：
iframe[src*="google.com/maps"] .scrollable { pointer-events: auto; overflow-y: scroll; }
然后，在您的 HTML 页面中，对需要滚动的元素添加 .scrollable 类名即可：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386566.51561469037!2d-122.41941550000001!3d37.7749295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807b9a45a35d%3A0xe8e259ed63db337!2sGolden+Gate+Bridge!5e0!3m2!1sen!2sus!4v1438674306256" width="600" height="450" style="border:0" allowfullscreen> <div class="scrollable"> <!-- 可以滚动的元素 --> </div> </iframe>
3. 完整示例代码
下面是完整的示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- --------- -- ------ ---- ------ -------------- ------- ------------------------------ - --------------- ----- ----------- ------- ----------- ------- - ------------------------------ ----------- - --------------- ----- ----------- ------- - -------- ------- ------ ----------- --------- -- ------ ---- ------ ----------- ------- ----------------------------------------------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
