Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9bc9de7

Browse files
committed
0.2.1 处理嵌套滚动条事件冒泡逻辑
1 parent 779f044 commit 9bc9de7

File tree

5 files changed

+74
-40
lines changed

5 files changed

+74
-40
lines changed

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
> 主要在 PC 端使用,如果检测到是移动端,会直接使用原生滚动条,ohyeah-scroll 不会进行初始化
88
99
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
10-
| --------- | --------- | --------- | --------- | --------- |
11-
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
10+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
11+
| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
1212

1313
### 特性
1414

@@ -208,3 +208,7 @@ export default {
208208
- 如果你不设置ohyeah的width和height属性,或者设置为百分比,
209209
- 那么就需要一个具有高度和宽度的父级元素来包裹ohyeah
210210

211+
### 更新
212+
213+
- 2019年05月09日 处理了嵌套滚动条的事件冒泡问题
214+
> 原生滚动条(子)和ohyeah(父)嵌套时,原生滚动条需要设置@wheel.stop, todo: 目前的方案不完美,待升级

‎dist/ohyeah-scroll.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-ohyeah-scroll",
33
"description": "prettier scroll",
4-
"version": "0.1.5",
4+
"version": "0.2.1",
55
"author": "L <https://blog.isluo.com>",
66
"license": "MIT",
77
"private": false,

‎src/App.vue‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,25 @@
66
<p>a</p>
77
<p>a</p>
88
<p>a</p>
9-
<ohyeahref="scroll1"
10-
:no-hor="noV"
11-
width="300px"
12-
height="400px"
13-
:autoHide="false"
14-
@onVerStart="onVerStart"
15-
@onVerEnd="onVerEnd"
16-
@onHorStart="onHorStart"
17-
@onHorEnd="onHorEnd"
18-
@onScroll="onScroll"
19-
trackColor="transparent">
20-
<ul>
21-
<liv-for="(item,index) in arr"
22-
:style="`width:${width}px`"
23-
:key="index">
24-
<p>{{`${item}-${index}`}}</p>
25-
</li>
26-
</ul>
27-
</ohyeah>
9+
<divstyle="width:300px;height:500px;">
10+
<ohyeahref="scroll1"
11+
:no-hor="noV"
12+
:autoHide="false"
13+
@onVerStart="onVerStart"
14+
@onVerEnd="onVerEnd"
15+
@onHorStart="onHorStart"
16+
@onHorEnd="onHorEnd"
17+
@onScroll="onScroll"
18+
trackColor="transparent">
19+
<ul>
20+
<liv-for="(item,index) in arr"
21+
:style="`width:${width}px`"
22+
:key="index">
23+
<p>{{`${item}-${index}`}}</p>
24+
</li>
25+
</ul>
26+
</ohyeah>
27+
</div>
2828
<div class="demo-div2">
2929
<div v-for="(item,index) in arr"
3030
:key="index">
@@ -115,7 +115,10 @@ body {
115115
}
116116
.app-box {
117117
position: relative;
118-
height: 100vh;
118+
height: 500px;
119+
width: 800px;
120+
border: solid 1px #ccc;
121+
padding: 20px;
119122
}
120123
.demo-div {
121124
width: 300px;

‎src/packages/ohyeah/ohyeah.vue‎

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,6 @@ export default {
244244
// 滚动条上鼠标按下 1纵 2横
245245
onBarMousedown(e, type) {
246246
e.preventDefault();
247-
e.stopPropagation();
248247
e.stopImmediatePropagation();
249248
250249
this.barHDown = type === 1;
@@ -257,7 +256,6 @@ export default {
257256
// 轨道上鼠标按下
258257
onTrackMousedown(e, type) {
259258
e.preventDefault();
260-
e.stopPropagation();
261259
e.stopImmediatePropagation();
262260
this.barHDown = type === 1;
263261
this.barWDown = type === 2;
@@ -325,29 +323,58 @@ export default {
325323
},
326324
//鼠标滚轮事件
327325
onMouseWheel(e) {
328-
e.preventDefault();
329-
e.stopPropagation();
330-
e.stopImmediatePropagation();
331-
332326
// 节流
333327
if (!this.timer) {
328+
let y =
329+
this.realShowH && e.deltaY
330+
? Math.min(
331+
Math.max(e.deltaY * this.slow + this.barHScrollTop, 0),
332+
this.trickH - this.barHTall
333+
)
334+
: 0;
335+
let x =
336+
this.realShowW && e.deltaX
337+
? Math.min(
338+
Math.max(e.deltaX * this.slow + this.barWScrollLeft, 0),
339+
this.trickW - this.barWTall
340+
)
341+
: 0;
342+
343+
this.willStopProp(e, y, x);
344+
334345
requestAnimationFrame(() => {
335346
this.transSpeed = 0;
336-
if (this.realShowH) {
337-
this.barHScrollTop = Math.min(
338-
Math.max(e.deltaY * this.slow + this.barHScrollTop, 0),
339-
this.trickH - this.barHTall
340-
);
347+
if (this.realShowH && e.deltaY) {
348+
this.barHScrollTop = y;
341349
}
342-
if (this.realShowW) {
343-
this.barWScrollLeft = Math.min(
344-
Math.max(e.deltaX * this.slow + this.barWScrollLeft, 0),
345-
this.trickW - this.barWTall
346-
);
350+
if (this.realShowW && e.deltaX) {
351+
this.barWScrollLeft = x;
347352
}
348353
this.timer = 0;
349354
});
350355
this.timer = 1;
356+
} else {
357+
e.preventDefault();
358+
e.stopImmediatePropagation();
359+
}
360+
},
361+
362+
willStopProp(e) {
363+
if (
364+
e.deltaY &&
365+
this.barHScrollTop + e.deltaY > 0 &&
366+
this.barHScrollTop + e.deltaY < this.trickH - this.barHTall
367+
) {
368+
e.preventDefault();
369+
e.stopImmediatePropagation();
370+
}
371+
if (
372+
e.deltaX &&
373+
this.barWScrollLeft + e.deltaX > 0 &&
374+
this.barWScrollLeft + e.deltaX < this.trickW - this.barWTall
375+
) {
376+
e.preventDefault();
377+
e.stopImmediatePropagation();
351378
}
352379
},
353380

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /