在嵌入式Google地图上禁用鼠标滚轮缩放
我正在一个WordPress网站上工作，作者通常会在大多数帖子中使用iFrames嵌入Google地图。
有没有办法使用Javascript通过鼠标滚轮禁用所有这些缩放？
共有3个答案
我扩展了@nathanielperales解决方案。
行为描述如下：
- 单击地图以启用滚动
下面是javascript代码：
// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
var that = $(this);
that.on('click', onMapClickHandler);
that.off('mouseleave', onMapMouseleaveHandler);
that.find('iframe').css("pointer-events", "none");
}
var onMapClickHandler = function (event) {
var that = $(this);
// Disable the click handler until the user leaves the map area
that.off('click', onMapClickHandler);
// Enable scrolling zoom
that.find('iframe').css("pointer-events", "auto");
// Handle the mouse leave event
that.on('mouseleave', onMapMouseleaveHandler);
}
// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);
这里是一个JSFIDLE示例。
我在这次讨论中尝试了第一个答案，无论我做什么，它都不适合我，所以我想出了自己的解决方案：
用类（本例中为映射）包装iframe，理想情况下嵌入响应性代码：http://embedresponsively.com/-将iframe的CSS更改为指针事件：无，然后使用jQuery的click函数对父元素更改iframe CSS为指针事件：自动
HTML
<div class='embed-container maps'>
<iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>
CSS
.maps iframe{
pointer-events: none;
}
jQuery
$('.maps').click(function () {
$('.maps iframe').css("pointer-events", "auto");
});
$( ".maps" ).mouseleave(function() {
$('.maps iframe').css("pointer-events", "none");
});
我确信有一种JavaScript唯一的方法可以做到这一点，如果有人想添加到这一点，请放心。
重新激活指针事件的JavaScripthtml" target="_blank">方法非常简单。只需为iFrame提供一个Id（即“iFrame”），然后将onclick事件应用于cointainer div：
onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"
<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
<iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
我也遇到了同样的问题：当滚动页面时，指针会越过地图，它会开始放大/缩小地图，而不是继续滚动页面(
所以我用一个来解决这个问题。在每次gmap插入之前，完全覆盖iframe，请参见：
<html>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>
在我的CSS中，我创建了一个类：
.overlay {
background:transparent;
position:relative;
width:640px;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
div将覆盖映射，防止指针事件到达它。但如果单击div，它对指针事件将变得透明，从而再次激活贴图！
我希望你能得到帮助：）
-
问题内容： 在鼠标滚轮上滚动它执行水平滚动。 已编辑 好吧，firebug说他在用 问题答案： 看来他只是将mousewheel事件映射到滚动区域。在IE中，仅通过使用方法就非常容易-滚动水平条的量为垂直条通常滚动的量。其他浏览器不支持该方法，因此您必须随心所欲地滚动任意数量：
-
本文向大家介绍图片旋转、鼠标滚轮缩放、镜像、切换图片js代码，包括了图片旋转、鼠标滚轮缩放、镜像、切换图片js代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家展示了图片旋转、鼠标滚轮缩放、镜像、切换图片多重效果，提供了详细的代码，分享给大家供大家参考，具体内容如下 具体代码： abc.js 以上就是js代码实现图片旋转、鼠标滚轮缩放、镜像、切换图片等效果的代码，希望对大家学习javas
-
鼠标事件是Web 开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了9 个鼠标事件，简介如下。 click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。 dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是DOM2 级
-
我试过了 但这似乎发生在选择改变之后。另一方面，TextBox工作得很好。有没有办法让combobox像MouseWheel上的TextBox一样运行？
-
我正在研究GWT应用程序（类似于油漆）。在这里，我有一个HTML5画布，其中有一个功能，上下滚动鼠标滚轮将放大和缩小画布。 我搜索了很多，但没有找到解决此问题的方法。以下是我们所做的： 现在，上面的代码适用于另一个Angular应用程序，我在其中上下滚动div元素（有一个滚动条），但它不适用于GWT应用程序中的画布（没有滚动条）。 我使用Selenium 3.14.0，并在Chrome浏览器上运行
-
问题内容： 我的意思是滚动时会轻松。 问题答案： var $pages = $(“.page”), PS： 使用，如果你的s为像一个滚动的DIV内（而不是） 注意： 对于 移动设备， 您可能希望针对浏览器的标签栏高度调整值（最好还是完全避免这种情况）。你有主意