Skip to content

Commit 13ed1cb

Browse files
KoryNunnKoryNunn
committed
Add cancellable option
1 parent 3b6a241 commit 13ed1cb

File tree

7 files changed

+83
-39
lines changed

7 files changed

+83
-39
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ scrollIntoView(someElement, {
6868
isWindow: function(target){
6969
// If you need special detection of the window object for some reason, you can do it here.
7070
return target.self === target;
71-
}
71+
},
72+
73+
cancellable: true // default is true, set to false to prevent users from cancelling the scroll with a touch or mousewheel
7274

7375
});
7476
```

‎example/index.browser.js

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ window.addEventListener('load', function(){
2323
}
2424
align();
2525

26+
function uncancellableAlign(){
27+
target.textContent = 'scrolling';
28+
scrollIntoView(target, { time: 2000, cancellable: false }, function(type){
29+
target.textContent = type;
30+
});
31+
}
32+
2633
function ease(){
2734
target.textContent = 'scrolling';
2835
scrollIntoView(target, {
@@ -57,27 +64,33 @@ window.addEventListener('load', function(){
5764
target.textContent = type;
5865
});
5966
side = (side + 1) % 2;
60-
button3.textContent = buttonText();
67+
menuAlignButton.textContent = buttonText();
6168
}
6269

63-
var button,
64-
button2;
70+
var alignButton,
71+
uncancellableAlignButton,
72+
easeButton,
73+
menuAlignButton;
6574

6675
crel(menu,
67-
button = crel('button', {'style':'width: 190px'},
76+
alignButton = crel('button', {'style':'width: 190px'},
6877
'scroll into view'
6978
),
70-
button2 = crel('button', {'style':'width: 190px'},
79+
uncancellableAlignButton = crel('button', {'style':'width: 190px'},
80+
'uncancellable scroll into view'
81+
),
82+
easeButton = crel('button', {'style':'width: 190px'},
7183
'scroll into view with custom easing'
7284
),
73-
button3 = crel('button', {'style':'width: 190px'},
85+
menuAlignButton = crel('button', {'style':'width: 190px'},
7486
buttonText()
7587
)
7688
);
7789

78-
button.addEventListener('click', align);
79-
button2.addEventListener('click', ease);
80-
button3.addEventListener('click', menuAlign);
90+
alignButton.addEventListener('click', align);
91+
uncancellableAlignButton.addEventListener('click', uncancellableAlign);
92+
easeButton.addEventListener('click', ease);
93+
menuAlignButton.addEventListener('click', menuAlign);
8194
});
8295
},{"../":3,"crel":2}],2:[function(require,module,exports){
8396
//Copyright (C) 2012 Kory Nunn
@@ -328,7 +341,8 @@ function transitionScrollTo(target, parent, settings, callback){
328341
var idle = !parent._scrollSettings,
329342
lastSettings = parent._scrollSettings,
330343
now = Date.now(),
331-
endHandler;
344+
cancelHandler,
345+
passiveOptions = { passive: true };
332346

333347
if(lastSettings){
334348
lastSettings.end(CANCELED);
@@ -340,8 +354,10 @@ function transitionScrollTo(target, parent, settings, callback){
340354
parent.parentElement._scrollSettings.end(endType);
341355
}
342356
callback(endType);
343-
parent.removeEventListener('touchstart', endHandler, { passive: true });
344-
parent.removeEventListener('wheel', endHandler, { passive: true });
357+
if(cancelHandler){
358+
parent.removeEventListener('touchstart', cancelHandler, passiveOptions);
359+
parent.removeEventListener('wheel', cancelHandler, passiveOptions);
360+
}
345361
}
346362

347363
parent._scrollSettings = {
@@ -355,9 +371,11 @@ function transitionScrollTo(target, parent, settings, callback){
355371
end: end
356372
};
357373

358-
endHandler = end.bind(null, CANCELED);
359-
parent.addEventListener('touchstart', endHandler, { passive: true });
360-
parent.addEventListener('wheel', endHandler, { passive: true });
374+
if(!('cancellable' in settings) || settings.cancellable){
375+
cancelHandler = end.bind(null, CANCELED);
376+
parent.addEventListener('touchstart', cancelHandler, passiveOptions);
377+
parent.addEventListener('wheel', cancelHandler, passiveOptions);
378+
}
361379

362380
if(idle){
363381
animate(parent);

‎example/index.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ window.addEventListener('load', function(){
2222
}
2323
align();
2424

25+
function uncancellableAlign(){
26+
target.textContent = 'scrolling';
27+
scrollIntoView(target, { time: 2000, cancellable: false }, function(type){
28+
target.textContent = type;
29+
});
30+
}
31+
2532
function ease(){
2633
target.textContent = 'scrolling';
2734
scrollIntoView(target, {
@@ -56,25 +63,31 @@ window.addEventListener('load', function(){
5663
target.textContent = type;
5764
});
5865
side = (side + 1) % 2;
59-
button3.textContent = buttonText();
66+
menuAlignButton.textContent = buttonText();
6067
}
6168

62-
var button,
63-
button2;
69+
var alignButton,
70+
uncancellableAlignButton,
71+
easeButton,
72+
menuAlignButton;
6473

6574
crel(menu,
66-
button = crel('button', {'style':'width: 190px'},
75+
alignButton = crel('button', {'style':'width: 190px'},
6776
'scroll into view'
6877
),
69-
button2 = crel('button', {'style':'width: 190px'},
78+
uncancellableAlignButton = crel('button', {'style':'width: 190px'},
79+
'uncancellable scroll into view'
80+
),
81+
easeButton = crel('button', {'style':'width: 190px'},
7082
'scroll into view with custom easing'
7183
),
72-
button3 = crel('button', {'style':'width: 190px'},
84+
menuAlignButton = crel('button', {'style':'width: 190px'},
7385
buttonText()
7486
)
7587
);
7688

77-
button.addEventListener('click', align);
78-
button2.addEventListener('click', ease);
79-
button3.addEventListener('click', menuAlign);
89+
alignButton.addEventListener('click', align);
90+
uncancellableAlignButton.addEventListener('click', uncancellableAlign);
91+
easeButton.addEventListener('click', ease);
92+
menuAlignButton.addEventListener('click', menuAlign);
8093
});

‎scrollIntoView.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,8 @@ function transitionScrollTo(target, parent, settings, callback){
114114
var idle = !parent._scrollSettings,
115115
lastSettings = parent._scrollSettings,
116116
now = Date.now(),
117-
endHandler;
117+
cancelHandler,
118+
passiveOptions = { passive: true };
118119

119120
if(lastSettings){
120121
lastSettings.end(CANCELED);
@@ -126,8 +127,10 @@ function transitionScrollTo(target, parent, settings, callback){
126127
parent.parentElement._scrollSettings.end(endType);
127128
}
128129
callback(endType);
129-
parent.removeEventListener('touchstart', endHandler, { passive: true });
130-
parent.removeEventListener('wheel', endHandler, { passive: true });
130+
if(cancelHandler){
131+
parent.removeEventListener('touchstart', cancelHandler, passiveOptions);
132+
parent.removeEventListener('wheel', cancelHandler, passiveOptions);
133+
}
131134
}
132135

133136
parent._scrollSettings = {
@@ -141,9 +144,11 @@ function transitionScrollTo(target, parent, settings, callback){
141144
end: end
142145
};
143146

144-
endHandler = end.bind(null, CANCELED);
145-
parent.addEventListener('touchstart', endHandler, { passive: true });
146-
parent.addEventListener('wheel', endHandler, { passive: true });
147+
if(!('cancellable' in settings) || settings.cancellable){
148+
cancelHandler = end.bind(null, CANCELED);
149+
parent.addEventListener('touchstart', cancelHandler, passiveOptions);
150+
parent.addEventListener('wheel', cancelHandler, passiveOptions);
151+
}
147152

148153
if(idle){
149154
animate(parent);

‎scrollIntoView.min.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.

‎standalone.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
// This file is used by `npm run build` to output scrollIntoView.min.js
12
window.scrollIntoView = require('./scrollIntoView');

‎test/test.browser.js

Lines changed: 12 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)