From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/globaleventhandlers/onwheel/index.html | 182 +++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 files/zh-cn/web/api/globaleventhandlers/onwheel/index.html (limited to 'files/zh-cn/web/api/globaleventhandlers/onwheel/index.html') diff --git a/files/zh-cn/web/api/globaleventhandlers/onwheel/index.html b/files/zh-cn/web/api/globaleventhandlers/onwheel/index.html new file mode 100644 index 0000000000..b657f2f4b0 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onwheel/index.html @@ -0,0 +1,182 @@ +--- +title: GlobalEventHandlers.onwheel +slug: Web/API/GlobalEventHandlers/onwheel +tags: + - API + - DOM + - Event Handler + - GlobalEventHandlers + - Property + - Reference + - onwheel +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +

{{ ApiRef("DOM") }}

+ +

归纳说明

+ +

{{domxref("GlobalEventHandlers")}} 的 onwheel 特性指向当前元素的滑轮滑动事件函数 {{domxref("EventHandler")}}。

+ +
+

注意：不要混淆 onwheel 和 {{domxref("GlobalEventHandlers.onscroll", "onscroll")}}：onwheel 通常用于处理滑轮的滚动事件，而 onscroll 用于处理某个对象内容的滚动。

+
+ +

语法

+ +
target.onwheel = functionRef;
+
+ +

值

+ +

functionRef 是一个函数名或者函数表达式。该函数接受一个 {{domxref("WheelEvent")}} 对象作为唯一的传入参数。

+ +

举例

+ +

以下例子展示了如何使用鼠标（或其它光标设备）的滚轮来缩放一个元素。

+ +

HTML

+ +
<div>Scale me with your mouse wheel.</div>
+ +

CSS

+ +
body {
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background: #cdf;
+  padding: 5px;
+  transition: transform .3s;
+}
+ +

JavaScript

+ +
function zoom(event) {
+  event.preventDefault();
+
+  if (event.deltaY < 0) {
+    // 放大
+    scale *= event.deltaY * -2;
+  }
+  else {
+    // 缩小
+    scale /= event.deltaY * 2;
+  }
+
+  // 限制缩放
+  scale = Math.min(Math.max(.125, scale), 4);
+
+  // 应用缩放过渡效果
+  el.style.transform = `scale(${scale})`;
+}
+
+let scale = 1;
+const el = document.querySelector('div');
+document.onwheel = zoom;
+ +

结果

+ +

{{EmbedLiveSample("Examples", 700, 400)}}

+ +

详情指南

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

注意

+ +

当用户在相应元素上滚动滑轮便触发 {{ event("wheel") }} 事件。

+ +

参见

+ + + +

+ +

+ +

+ +

+ +

+ +

-- cgit v1.2.3-54-g00ecf