Question

样式/标题列表Blockquotes代码HTML高级帮助»

<script>
 function event_branding() {
         document.getElementById("branding_fade").style.bottom = "0%";
         document.getElementById("branding_fade").style.opacity = "1";
         document.getElementById("branding_fade").style.transition = "all 2s";
         setTimeout(function () { $(".event_branding").css("visibility", "visible")},100); 
 }
</script>

Answer 1

试试这个

<div class="col-xs-7" style="padding-right:3px;">
    <img id="train_1_img" class="imageshow_temp" src="http://dummyimage.com/600x400/000/fff"/>
</div>

使用此脚本

var image = document.getElementById("train_1_img");
  if (image.addEventListener) {
   // IE9, Chrome, Safari, Opera
    image.addEventListener("mousewheel", MouseWheelEvent);
   // Firefox
    image.addEventListener("DOMMouseScroll", MouseWheelEvent);
}

function MouseWheelEvent(e) {
console.log('event', e)
// your statement here...
}

https://jsfiddle.net/fahadsaeed/f8ky3xkq/

Answer 2

这会奏效。

window.addEventListener('DOMMouseScroll', mouseWheelEvent);

这是一个Jquery示例。

http://codepen.io/damianocel/pen/vLerPM

现在，为什么这对每个人或所有浏览器都不起作用，因为这不是标准功能。

此外，MDN说：

在Gecko 17（Firefox 17）或更高版本中，您需要调用必须为每个本机事件触发的wheel事件的preventDefault（）。

在Gecko 16或更早版本中，您需要调用MozMousePixelScroll事件的preventDefault（），该事件必须针对每个本机事件触发。

总而言之，浏览器支持非常糟糕，不要将其用于生产站点。

Answer 3

您的代码不是很清楚。无论如何，我会把我的例子放在这里希望它有所帮助

params[:name]

在JS FIDDLE

中试用

我测试过，它也适用于Firefox和Chrome

有关浏览器兼容性的更详细工作，请参阅HERE

onmousewheel事件在firefox中不起作用

3 个答案: