javascript MouseWheel事件&视频音量-防止页面滚动 [英] javascript MouseWheel event & video volume - prevent page scroll
问题描述
我正在尝试使用MouseWheel控制视频音量,
我想在鼠标悬停在视频上时完全禁用页面滚动,
它可以正常工作,但是当视频的音量达到最小值和最小值时会出现问题.最高水平:
页面滚动开始...如果鼠标悬停在视频上,我不希望页面滚动!
实际上,我正在使用chrome浏览器:
I'm trying to control a video volume using the MouseWheel,
I want to completely disable the page scroll when my mouse is over the video,
it works but there's a problem when the video's volume reaches the min & max levels:
the page scroll begins...and I don't want the page scroll if my mouse is over the video!
Actually I'm trying it in chrome:
var popo = document.getElementById('popo');
var coco = document.getElementById('coco');
//popo.play();
//setTimeout(function(){
// popo.pause();
//},3000);
var current = 0;
var doScroll = function (e) {
// cross-browser wheel delta
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Do something with `delta`
current = current + delta;
coco.innerHTML = current;
if(delta== 1){popo.volume+=0.1;}
if(delta== -1){popo.volume-=0.1;}
e.preventDefault();
};
if (popo.addEventListener) {
popo.addEventListener("mousewheel", doScroll, false);
popo.addEventListener("DOMMouseScroll", doScroll, false);
} else {
popo.attachEvent("onmousewheel", doScroll);
}
JSFiddle演示: http://jsfiddle.net/NSjqd/5/
JSFiddle DEMO: http://jsfiddle.net/NSjqd/5/
推荐答案
您将希望向if语句中添加条件以将其打开或关闭,如下所示:
You will want to add a condition to your if statement to turn it up or down like so:
if(delta== 1 && popo.volume <= 0.9){popo.volume+=0.1;}
if(delta== -1 && popo.volume > 0.1){popo.volume-=0.1;}
这篇关于javascript MouseWheel事件&视频音量-防止页面滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!