onmousewheelイベント（マウスホイールイベント）とは、マウスホイールを動かした時のイベント。
構文
HTML
<element onmousewheel="イベントハンドラ">
例
div要素
<div onmousewheel="イベントハンドラ">div要素</div>
body要素
<body onmousewheel="イベントハンドラ">body要素</body>
JavaScript
object.onmousewheel = function(){ イベントハンドラ };
サンプル１
HTMLドキュメント上でイベントハンドラを登録するサンプル。
0
サンプル１の動作について
- 赤い背景色のdiv要素の上でマウスホイールを動かす度に、div要素内の数値に１を加算する。
- Chrome、IE11にて動作確認。2014/2/18現在、Firefoxでは動作せず。
サンプル１のソースコード
JavaScript
<script type="text/javascript">
function sampleACountUp() {
var $sampleA = document.getElementById( "sampleA" );
$sampleACount = $sampleA.innerHTML;
$sampleA.innerHTML = ++$sampleACount;
}
</script>
function sampleACountUp() {
var $sampleA = document.getElementById( "sampleA" );
$sampleACount = $sampleA.innerHTML;
$sampleA.innerHTML = ++$sampleACount;
}
</script>
HTML
<div id="sampleA" onmousewheel="sampleACountUp();">0</div>
CSS
<style>
#sampleA {
width: 300px;
padding: 250px 0;
border: 1px solid gray;
border-radius: 10px;
background-color: red;
color: white;
font-size: 50px;
text-align: center;
}
</style>
#sampleA {
width: 300px;
padding: 250px 0;
border: 1px solid gray;
border-radius: 10px;
background-color: red;
color: white;
font-size: 50px;
text-align: center;
}
</style>
サンプル２
JavaScript上で動的にイベントハンドラを登録するサンプル。
0
サンプル２の動作について
- 赤い背景色のdiv要素の上でマウスホイールを動かす度に、div要素内の数値に１を加算する。
- Chrome、IE11にて動作確認。2014/2/18現在、Firefoxでは動作せず。
サンプル２のソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $sampleB = document.getElementById( "sampleB" );
$sampleB.onmousewheel = function(){
sampleBCountUp();
};
}
function sampleBCountUp() {
var $sampleB = document.getElementById( "sampleB" );
$sampleBCount = $sampleB.innerHTML;
$sampleB.innerHTML = ++$sampleBCount;
}
</script>
window.onload = function () {
var $sampleB = document.getElementById( "sampleB" );
$sampleB.onmousewheel = function(){
sampleBCountUp();
};
}
function sampleBCountUp() {
var $sampleB = document.getElementById( "sampleB" );
$sampleBCount = $sampleB.innerHTML;
$sampleB.innerHTML = ++$sampleBCount;
}
</script>
HTML
<div id="sampleB">0</div>
CSS
<style>
#sampleB {
width: 300px;
padding: 250px 0;
border: 1px solid gray;
border-radius: 10px;
background-color: red;
color: white;
font-size: 50px;
text-align: center;
}
</style>
#sampleB {
width: 300px;
padding: 250px 0;
border: 1px solid gray;
border-radius: 10px;
background-color: red;
color: white;
font-size: 50px;
text-align: center;
}
</style>