Skip to content
This repository was archived by the owner on Jun 9, 2022. It is now read-only.

Commit 4012aae

Browse files
committed
Merge pull request #85 from ftlabs/paginatedSnapFromOutsideBounds
Paginated snap from outside bounds
2 parents 49c82a0 + 37f6251 commit 4012aae

File tree

3 files changed

+43
-19
lines changed

3 files changed

+43
-19
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ Options must be specified at create-time by passing a JSON object as the second
5050
* `flinging` Allow a fast scroll to continue with momentum when released _(boolean, default true)_
5151
* `hwAccelerationClass` FTScroller uses normal translate properties rather than translate3d to position content when scrolling, and triggers hardware acceleration by adding CSS properties (specifically backface-visibility) to this class on platforms that support it. Adjusting this class allows for negotiating complex CSS inheritance to override the default behaviour of FTScroller if you want to change or disable backing layers/3D acceleration. _(string, default an internal class which triggers backing layers)_
5252
* `maxFlingDuration` Set the maximum time (ms) that a fling can take to complete once the input has ended _(numeric, default 1000ms)_
53-
* `paginatedSnap` If snapping is enabled, restricts each scroll movement to one 'page' span. That is, if set to true, it will not be possible to move more than one page in a single movement. _(boolean, default false)_
5453
* `scrollbars` Whether to display iOS-style scrollbars (which you can style yourself using `.ftscroller_scrollbar` and `.ftscroller_scrollbarx`/`.ftscroller_scrollbary`) while the content is animating _(boolean, default true)_
5554
* `scrollBoundary` The initial movement required to trigger a full scroll, in pixels; this is the point at which the scroll is exclusive to this particular FTScroller instance and flings become active _(integer, default 1)_
5655
* `scrollingClassName` The classname to add to the scroller container when it is being actively scrolled. This is disabled by default as it can cause a CSS relayout if enabled, but allows custom styling in response to scrolls _(string, default not set)_
5756
* `scrollResponseBoundary` The initial movement required to trigger a visual scroll update, in pixels _(integer, default 1)_
5857
* `scrollingX` Enable scrolling on the X axis if content is available _(boolean, default true)_
5958
* `scrollingY` Enable scrolling on the Y axis if content is available _(boolean, default true)_
59+
* `singlePageScrolls` _(was `paginatedSnap`)_ If snapping is enabled, restricts each scroll movement to one 'page' span. That is, if set to true, it will not be possible to move more than one page in a single movement. _(boolean, default false)_
6060
* `snapping` Enable snapping of content to defined 'pages' or segments _(boolean, default false)_
6161
* `snapSizeX` Define the horizontal interval content should snap to, in pixels. If this is not set, snapping will be based on pages corresponding to the container size. _(numeric, default undefined)_
6262
* `snapSizeY` Define the vertical interval content should snap to, in pixels. If this is not set, snapping will be based on pages corresponding to the container size. _(numeric, default undefined)_

examples/horizontalpaged-strict.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,9 @@
3838
var scroller = new FTScroller(document.getElementById('scrollable'), {
3939
scrollingY: false,
4040
snapping: true,
41-
paginatedSnap: true,
42-
scrollbars: false
41+
singlePageScrolls: true,
42+
scrollbars: false,
43+
bouncing: false
4344
});
4445
</script>
4546
</body>

lib/ftscroller.js

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -236,9 +236,9 @@ var FTScroller, CubicBezier;
236236
// take effect. If this is not defined, snapping will use intervals based on container size.
237237
snapSizeY: undefined,
238238

239-
// Control whether snapping should be fully paginated, only ever flicking to the next page
239+
// Control whether snapping should be curtailed to only ever flick to the next page
240240
// and not beyond. Snapping needs to be enabled for this to take effect.
241-
paginatedSnap: false,
241+
singlePageScrolls: false,
242242

243243
// Allow scroll bouncing and elasticity near the ends and grid
244244
bouncing: true,
@@ -401,8 +401,18 @@ var FTScroller, CubicBezier;
401401
// Override default and global options with supplied options
402402
if (options) {
403403
for (key in options) {
404-
if (options.hasOwnProperty(key) && _instanceOptions.hasOwnProperty(key)) {
405-
_instanceOptions[key] = options[key];
404+
if (options.hasOwnProperty(key)) {
405+
406+
// If a deprecated flag was passed in, warn, and convert to the new flag name
407+
if ('paginatedSnap' === key) {
408+
console.warn('FTScroller: "paginatedSnap" is deprecated; converting to "singlePageScrolls"');
409+
_instanceOptions.singlePageScrolls = options.paginatedSnap;
410+
continue;
411+
}
412+
413+
if (_instanceOptions.hasOwnProperty(key)) {
414+
_instanceOptions[key] = options[key];
415+
}
406416
}
407417
}
408418

@@ -1084,9 +1094,9 @@ var FTScroller, CubicBezier;
10841094
}
10851095
}
10861096

1087-
// In paginated snapping mode, determine the page to snap to - maximum
1088-
// one page in either direction from the current page.
1089-
if (_instanceOptions.paginatedSnap && _instanceOptions.snapping) {
1097+
// In single-page-scroll mode, determine the page to snap to - maximum one page
1098+
// in either direction from the *start* page.
1099+
if (_instanceOptions.singlePageScrolls && _instanceOptions.snapping) {
10901100
flingStartSegment = -_lastScrollPosition[axis] / _snapGridSize[axis];
10911101
if (_baseSegment[axis] < flingStartSegment) {
10921102
flingStartSegment = Math.floor(flingStartSegment);
@@ -1095,10 +1105,10 @@ var FTScroller, CubicBezier;
10951105
}
10961106

10971107
// If the target position will end up beyond another page, target that page edge
1098-
if (flingPosition > -(flingStartSegment - 1) * _snapGridSize[axis]) {
1099-
bounceDistance = flingPosition + (flingStartSegment - 1) * _snapGridSize[axis];
1100-
} else if (flingPosition < -(flingStartSegment + 1) * _snapGridSize[axis]) {
1101-
bounceDistance = flingPosition + (flingStartSegment + 1) * _snapGridSize[axis];
1108+
if (flingPosition > -(_baseSegment[axis] - 1) * _snapGridSize[axis]) {
1109+
bounceDistance = flingPosition + (_baseSegment[axis] - 1) * _snapGridSize[axis];
1110+
} else if (flingPosition < -(_baseSegment[axis] + 1) * _snapGridSize[axis]) {
1111+
bounceDistance = flingPosition + (_baseSegment[axis] + 1) * _snapGridSize[axis];
11021112

11031113
// Otherwise, if the movement speed was above the minimum velocity, continue
11041114
// in the move direction.
@@ -1347,15 +1357,28 @@ var FTScroller, CubicBezier;
13471357
* scroll position render if a requestAnimationFrame loop isn't active
13481358
*/
13491359
_constrainAndRenderTargetScrollPosition = function _constrainAndRenderTargetScrollPosition() {
1350-
var axis;
1360+
var axis, upperBound, lowerBound;
13511361

13521362
// Update axes target positions if beyond bounds
13531363
for (axis in _scrollableAxes) {
13541364
if (_scrollableAxes.hasOwnProperty(axis)) {
1355-
if (_targetScrollPosition[axis] > 0) {
1356-
_targetScrollPosition[axis] = _modifyDistanceBeyondBounds(_targetScrollPosition[axis], axis);
1357-
} else if (_targetScrollPosition[axis] < _metrics.scrollEnd[axis]) {
1358-
_targetScrollPosition[axis] = _metrics.scrollEnd[axis] + _modifyDistanceBeyondBounds(_targetScrollPosition[axis] - _metrics.scrollEnd[axis], axis);
1365+
1366+
// Set bounds to the left and right of the container
1367+
upperBound = 0;
1368+
lowerBound = _metrics.scrollEnd[axis];
1369+
1370+
if (_instanceOptions.singlePageScrolls && _instanceOptions.snapping) {
1371+
1372+
// For a single-page-scroll, set the bounds to the left and right of the
1373+
// current segment
1374+
upperBound = Math.min(upperBound, -(_baseSegment[axis] - 1) * _snapGridSize[axis]);
1375+
lowerBound = Math.max(lowerBound, -(_baseSegment[axis] + 1) * _snapGridSize[axis]);
1376+
}
1377+
1378+
if (_targetScrollPosition[axis] > upperBound) {
1379+
_targetScrollPosition[axis] = upperBound + _modifyDistanceBeyondBounds(_targetScrollPosition[axis] - upperBound, axis);
1380+
} else if (_targetScrollPosition[axis] < lowerBound) {
1381+
_targetScrollPosition[axis] = lowerBound + _modifyDistanceBeyondBounds(_targetScrollPosition[axis] - lowerBound, axis);
13591382
}
13601383
}
13611384
}

0 commit comments

Comments
 (0)