files/zh-cn/web/api/globaleventhandlers/onwheel/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

---
title: GlobalEventHandlers.onwheel
slug: Web/API/GlobalEventHandlers/onwheel
tags:
  - API
  - DOM
  - Event Handler
  - GlobalEventHandlers
  - Property
  - Reference
  - onwheel
translation_of: Web/API/GlobalEventHandlers/onwheel
---
<p>{{ ApiRef("DOM") }}</p>

<h2 id="归纳说明">归纳说明</h2>

<p>{{domxref("GlobalEventHandlers")}} 的 <code>onwheel</code> 特性指向当前元素的滑轮滑动事件函数 {{event("Event_handlers", "event handler")}}。</p>

<div class="blockIndicator note">
<p><strong>注意：</strong>不要混淆 <code>onwheel</code><strong> </strong>和 {{domxref("GlobalEventHandlers.onscroll", "onscroll")}}：<code>onwheel</code> 通常用于处理滑轮的滚动事件，而 <code>onscroll</code> 用于处理某个对象内容的滚动。</p>
</div>

<h2 id="语法">语法</h2>

<pre class="brush: js">target.onwheel = <em>functionRef;</em>
</pre>

<h3 id="值">值</h3>

<p><code>functionRef</code> 是一个函数名或者<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>。该函数接受一个 {{domxref("WheelEvent")}} 对象作为唯一的传入参数。</p>

<h2 id="举例">举例</h2>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;Scale me with your mouse wheel.&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">function zoom(event) {
  event.preventDefault();

  if (event.deltaY &lt; 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;</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample("Examples", 700, 400)}}</p>

<h2 id="Specification" name="Specification">详情指南</h2>

<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

{{Compat("api.GlobalEventHandlers.onwheel")}}

<h2 id="参见">参见</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/wheel_event">Document: <code>wheel</code> event</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event">Element: <code>wheel</code> event</a></li>
</ul>

<p>
 <audio class="hidden"></audio>
</p>

<p>
 <audio class="hidden"></audio>
</p>

<p>
 <audio class="hidden"></audio>
</p>