マウスの横スクロールバーとマウスのスクロール方向
32434 ワード
マウスの横スクロールの考え方マウスのスクロールが縦スクロールバーの動作に影響することを阻止する .スクロールバーに影響を与えるコンテナを見つけるscrollLeftプロパティは です.マウスのローラー方向によって、スクロールバーが左にスクロールするか右にスクロールするかを決定する .
ケース・インプリメンテーション
テスト中にscrollLeft属性値が0の場合を理解する
説明説明 sonコンポーネントの幅は4000 px である
したがって、親容器bodyアセンブリは、布団アセンブリが「開く」ため、親アセンブリの幅も4000 px となる.ブラウザにスクロールバー が表示されました.スクロールバーはウィンドウ全体でbodyではないので、本物のスクロールバーはhtmlでbodyではないので、bodyをクエリーするscrollLeftプロパティは常に0 です.
マウスのスクロール方向を判断する方法互換性の問題を考慮する必要がある火狐と非火狐 火狐detail属性に従って、ゼロより大きい場合は上へスクロールし、0より小さい場合は下へスクロール である.非火狐wheelDeltaプロパティに従って、ゼロより大きい場合は上へスクロールし、0より小さい場合は下へスクロール
ケース・インプリメンテーション
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="./jquery.min.js">script>
head>
<style>
#son {
height: 4000px;
width: 4000px;
}
#parent {
position: absolute;
top: 500px;
left: 500px;
border: 1px solid red;
width: 300px;
height: 300px;
overflow: auto;
}
style>
<body>
<div style="padding: 15px;" id="parent">
<div id="son">div>
div>
body>
<script>
let son = document.getElementById("son");
let parent = document.getElementById("parent");
window.onload = function() {
let $son = $("#son");
son.onwheel = function(e) {
// （ " " ）
e.preventDefault();
console.log(e);
// son ， scrollLeft 0
console.log($son.scrollLeft());
if (e.wheelDelta) { // IE，
if (e.wheelDelta > 0) { //
//
console.log(parent.scrollLeft);
parent.scrollLeft = parent.scrollLeft - 50
}
if (e.wheelDelta < 0) { //
//
console.log(parent.scrollLeft);
parent.scrollLeft = parent.scrollLeft + 50
}
} else if (e.detail) { //Firefox
if (e.detail> 0) { //
//
console.log(parent.scrollLeft);
parent.scrollLeft = parent.scrollLeft - 50
}
if (e.detail< 0) { //
//
console.log(parent.scrollLeft);
parent.scrollLeft = parent.scrollLeft + 50
}
}
}
}
script>
html>
テスト中にscrollLeft属性値が0の場合を理解する
<html lang="en" id="root">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script src="./jquery.min.js">script>
head>
<style>
#son {
height: 2000px;
width: 2000px;
}
style>
<body id="parent">
<div id="son">div>
body>
<script>
let sonWidget = document.getElementById("son");
let parent = document.getElementById("parent");
let root = document.getElementById("root");
debugger
window.onload = function() {
let $son = $("#son");
sonWidget.onwheel = function(e) {
// （ " " ）
e.preventDefault();
console.log(e);
console.log($son.scrollLeft());
// body scrollLeft ， ， 0， body
console.log(parent.scrollLeft);
// html ， ， document scrollLeft
console.log($(document).scrollLeft())
if (e.wheelDelta) { // IE，
if (e.wheelDelta > 0) { //
//
console.log(root.scrollLeft);
root.scrollLeft = root.scrollLeft - 50
}
if (e.wheelDelta < 0) { //
//
console.log(root.scrollLeft);
root.scrollLeft = root.scrollLeft + 50
}
} else if (e.detail) { //Firefox
if (e.detail> 0) { //
//
console.log(root.scrollLeft);
root.scrollLeft = root.scrollLeft - 50
}
if (e.detail< 0) { //
//
console.log(root.scrollLeft);
root.scrollLeft = root.scrollLeft + 50
}
}
};
};
script>
html>
説明説明
したがって、
マウスのスクロール方向を判断する方法
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { // IE，
if (e.wheelDelta > 0) { //
//
}
if (e.wheelDelta < 0) { //
//
}
} else if (e.detail) { //Firefox
if (e.detail> 0) { //
//
}
if (e.detail< 0) { //
//
}
}
}
//
if (document.addEventListener) {//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
// scrollFunc //ie
window.onmousewheel = document.onmousewheel = scrollFunc;