jsマウスがあるdivにスライドすることを実現します。スクロール禁止です。
本論文の例では、jsマウスがあるdivにスクロール禁止の具体的なコードを共有しました。参考にしてください。具体的な内容は以下の通りです。
プロジェクトの中で一つのシーンに遭遇したのは、マウスがあるdivを滑った時、マウスのページをスライドさせてスクロールしないということです。
ここでは主にマウスをdivにスライドさせた時、ローラーイベントを待ち受け、イベントをpreventDefault()でスクロールを停止することです。以下は例です。
eg:
プロジェクトの中で一つのシーンに遭遇したのは、マウスがあるdivを滑った時、マウスのページをスライドさせてスクロールしないということです。
ここでは主にマウスをdivにスライドさせた時、ローラーイベントを待ち受け、イベントをpreventDefault()でスクロールを停止することです。以下は例です。
eg:
#wrap {
position:absolute;
top:200px;
background:#000000;
font-size: 40px;
width:50vw;
text-align: center;
color: #ffffff;
line-height: 300px;
height:300px;
}
<div id="wrap">
,
</div>
window.onload = function () {
for (i = 0; i < 50; i++) {
var x = document.createElement('div');
x.innerHTML = "test<br/>";
document.body.appendChild(x);
}
function $(x) {
return document.getElementById(x);
};
$("wrap").onmousewheel = function scrollWheel(e) {
var sl;
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
event.returnValue = false;
} else {
e.preventDefault();
};
};
if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
//firefox onmousewheel
addEventListener('DOMMouseScroll',
function (e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == 'BODY') break;
obj = obj.parentNode;
};
if (onmousewheel) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false; //
if (typeof obj.onmousewheel != 'function') {
// onmousewheel function
eval('window._tmpFun = function(event){' + onmousewheel + '}');
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
};
// onmousewheel(e) , , setTimeout
setTimeout(function () {
obj.onmousewheel(e);
},
1);
};
},
false);
};
}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。