Skip to content

Commit

Permalink
v3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilyashubin
ilyashubin committed Jun 7, 2020
1 parent d807640 commit eabb1df
Show file tree
Hide file tree
Showing 7 changed files with 1,279 additions and 1,085 deletions.
11 changes: 7 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,19 @@ direction | String | 'all' | Scroll direction. Could be 'horizontal', 'vertical'
bounce | Boolean | true | Enables elastic bounce effect when hitting viewport borders
textSelection | Boolean | false | Enables text selection inside viewport
inputsFocus | Boolean | true | Enables focus for elements: 'input', 'textarea', 'button', 'select' and 'label'
pointerMode | String | 'all' | Specify pointer type. Supported values - 'touch' (scroll only on touch devices), 'mouse' (scroll only on desktop), 'all' (mobile and desktop)
pointerMode | String | 'all' | Specify pointer type. Supported values - 'touch' (scroll only on touch devices), 'mouse' (scroll only on desktop), 'all' (mobile and desktop)
friction | Number | 0.05 | Scroll friction factor - how fast scrolling stops after pointer release
bounceForce | Number | 0.1 | Elastic bounce effect factor
emulateScroll | Boolean | false | Enables mouse wheel/trackpad emulation inside viewport
preventDefaultOnEmulateScroll | String | false | Prevents horizontal or vertical default when `emulateScroll` is enabled (eg. useful to prevent horizontal trackpad gestures while enabling vertical scrolling). Could be 'horizontal' or 'vertical'.
pointerDownPreventDefault | Boolean | true | Prevent default `mousedown`/`touchstart` event (scroll window while dragging on mobile devices)
lockScrollOnDragDirection | String | false | Detect drag direction and either prevent default `mousedown`/`touchstart` event or lock content scroll. Could be 'horizontal' or 'vertical'
lockScrollOnDragDirection | String | false | Detect drag direction and either prevent default `mousedown`/`touchstart` event or lock content scroll. Could be 'horizontal', 'vertical' or 'all'
dragDirectionTolerance | Number | 40 | Tolerance for horizontal or vertical drag detection
onUpdate | Function | noop | Handler function to perform actual scrolling. Receives scrolling state object with coordinates
onClick | Function | noop | Click handler function. Here you can, for example, prevent default event for click on links. Receives object with scrolling metrics and event object. Calls after each `click` in scrollable area
onPointerDown | Function | noop | `mousedown`/`touchstart` events handler
onPointerUp | Function | noop | `mouseup`/`touchend` events handler
onPointerMove | Function | noop | `mousemove`/`touchmove` events handler
onWheel | Function | noop | `wheel` event handler
shouldScroll | Function | noop | Function to permit or disable scrolling. Receives object with scrolling state and event object. Calls on `pointerdown` (mousedown, touchstart) in scrollable area. You can return `true` or `false` to enable or disable scrolling

### List of methods
Expand Down Expand Up @@ -94,7 +97,7 @@ const sb = new ScrollBooster({
const isButton = event.target.nodeName.toLowerCase() === 'button';
return !isButton;
},
onClick: (state, event) => {
onClick: (state, event, isTouchDevice) => {
// prevent default link event
const isLink = event.target.nodeName.toLowerCase() === 'link';
if (isLink) {
Expand Down
2 changes: 1 addition & 1 deletion dist/scrollbooster.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/scrollbooster.min.js.map
View file

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>scrollbooster mini test</title>
<style>
.app {
Expand Down Expand Up @@ -42,6 +43,9 @@
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam aspernatur autem consequuntur corporis deleniti dolor doloremque eligendi enim eos facere facilis fuga hic iste iusto laboriosam laborum magni maiores maxime minima minus molestiae neque nisi non, odio placeat praesentium rem sint tempore temporibus veniam voluptas, voluptatibus voluptatum! Beatae dolorem earum ipsa odit optio, quaerat sint? Amet animi aperiam blanditiis, corporis culpa excepturi facilis fugiat harum, id inventore ipsum libero magni minima natus nesciunt porro praesentium quos rem sint tenetur veritatis vitae voluptas, voluptatibus! Aut cum debitis doloremque esse eum pariatur quam reiciendis similique sit sunt! A accusamus beatae consectetur cupiditate deleniti doloremque ea eaque eligendi fugiat harum necessitatibus nihil nostrum officia officiis pariatur placeat, quas saepe sapiente similique sunt vel vero voluptatem voluptatibus. Aliquam assumenda beatae, distinctio ipsa laborum molestias obcaecati quas ratione repellendus sapiente. Architecto blanditiis deserunt, ipsa officiis placeat quasi quia quos recusandae voluptate voluptatem. A ab architecto aspernatur atque beatae corporis deleniti distinctio esse eveniet ex excepturi hic illo itaque iusto labore maiores molestias necessitatibus nemo neque nesciunt nisi non officia quaerat, quam reiciendis repellat sapiente sit tempora temporibus velit veniam vitae voluptas voluptatum? Ab at enim facere iusto libero nemo numquam quasi quibusdam quod sapiente! Alias aliquid aperiam atque, cupiditate distinctio eaque eum excepturi facere facilis fugiat harum maiores molestiae molestias odio, optio perferendis provident quam quas quasi quibusdam sint ut voluptates? Amet minima optio quae voluptate? Assumenda atque consectetur corporis debitis delectus deserunt dignissimos distinctio ducimus et excepturi exercitationem, impedit iure iusto magnam magni maxime nam nihil optio quaerat quas ratione repudiandae, sit tenetur ullam vero. Architecto commodi dicta provident. Accusantium alias aperiam aspernatur atque aut, corporis deleniti eius enim eos esse eum maiores mollitia neque non nostrum odio, optio perspiciatis provident quasi quo recusandae repellat sunt temporibus veniam voluptatum. Dolor facilis fuga, fugit iure laboriosam magnam modi molestias nemo neque nesciunt nisi non nulla numquam provident quasi quibusdam ratione sequi veniam? A alias animi beatae deserunt dolor eius eligendi, enim, eum expedita hic illo, illum impedit iste laborum libero maxime nesciunt numquam officiis perferendis quaerat quas qui similique soluta suscipit tempora? Aut nisi, voluptatem! Ab ad alias animi aspernatur consectetur debitis delectus doloremque eaque eos est fuga fugiat harum ipsa ipsam, ipsum nihil officia optio quam quia ratione recusandae soluta suscipit tenetur ut velit veniam veritatis! Ab deserunt eos illo inventore perferendis qui reiciendis? Accusamus, ad aut consectetur cum cupiditate distinctio dolor exercitationem expedita illum iste labore laboriosam libero maiores perspiciatis quos repellendus reprehenderit suscipit totam ullam, ut? Accusantium adipisci animi blanditiis consequatur debitis delectus dolor dolores et expedita id in inventore iste laboriosam laudantium libero magnam maiores pariatur placeat quia quibusdam, quo repudiandae sed soluta totam unde veritatis vero? Accusantium at dolorem dolores eveniet facere fugit iure iusto magnam, neque porro possimus quia repudiandae sed veritatis, voluptates. Ab aliquid amet assumenda blanditiis, commodi consequatur corporis esse harum, labore laudantium molestias nobis odio, omnis pariatur perspiciatis praesentium quidem quisquam rerum temporibus veritatis. Adipisci aspernatur aut cum dolorem eaque eius et excepturi explicabo illum incidunt ipsa libero minima, molestiae nam nemo nesciunt porro reiciendis rem sapiente sed sequi sint tempore unde vel veniam. Ad aut dolorem ducimus eius, eos et eum explicabo fugit in laudantium perspiciatis qui quis quo. Accusantium aspernatur culpa cum excepturi fugit illum ipsa magni necessitatibus porro praesentium! A ab at delectus ea perferendis, repudiandae sequi. Adipisci deleniti dolore praesentium quia reiciendis? A beatae dolorum inventore laboriosam mollitia quaerat ut voluptas. Ad architecto beatae distinctio explicabo necessitatibus nihil officiis quos velit? Architecto autem, commodi deleniti esse, facilis laudantium nulla obcaecati perferendis possimus quas velit vitae voluptas. Beatae blanditiis culpa cumque doloremque dolorum excepturi fuga hic maxime minima mollitia nihil nostrum numquam odio, provident repellendus repudiandae sapiente sit tenetur vero voluptatum. Dolore ea earum eos eum ipsa labore laborum molestias similique voluptatem. Amet, commodi debitis dolore, doloremque earum enim illum natus nisi pariatur quas recusandae reprehenderit sequi ullam. Ab dolorem eaque hic ipsa, laudantium libero minus nesciunt officiis, placeat repellat sint soluta. Amet delectus eius laudantium. Animi aperiam consequatur corporis, cum eaque earum eligendi eos error ex fuga impedit inventore iusto laborum magni numquam obcaecati quaerat, quo reiciendis reprehenderit repudiandae rerum sit soluta ullam. Adipisci, aliquam aliquid atque consequuntur culpa cumque ea earum eum facere fugit id laborum minima modi natus nisi obcaecati, provident quaerat quas quisquam quo rem rerum sed. Aut beatae dolor doloremque nisi voluptas. Consectetur deleniti explicabo non reprehenderit? Laudantium neque officiis pariatur repellendus voluptas? Blanditiis commodi, consequuntur delectus impedit minus natus omnis quidem repellendus suscipit ullam! Aliquam culpa cumque deserunt doloribus earum eos id incidunt iste iure modi, nesciunt omnis perferendis provident quia quibusdam quidem sit tempore veniam vero voluptates! Deleniti ducimus molestias praesentium quod repudiandae. Ab aperiam, architecto at atque consequuntur cum dolore dolorum fugit laudantium libero necessitatibus officiis perspiciatis, quia similique suscipit tenetur vel veritatis. Animi, dolorem, dolores eius error ex laborum natus nemo numquam pariatur repellat repellendus totam voluptas! Aliquam aliquid aspernatur assumenda commodi corporis delectus dolorum error est fugiat illo ipsa ipsum molestias, natus quaerat quas quasi qui quia reiciendis reprehenderit ut! Atque corporis expedita explicabo fugit id ipsum molestiae neque quam quo temporibus? Ad, autem delectus esse fugit maxime nisi numquam odio optio, quia temporibus velit, voluptatum. Ad aliquid aspernatur cupiditate, debitis deserunt dolores ea eligendi est excepturi facilis ipsum itaque iure labore laboriosam magnam magni molestiae nam nesciunt nulla, perferendis quasi, quidem reiciendis rem reprehenderit repudiandae sequi sunt totam ullam vel velit. Accusamus amet assumenda culpa dolores, ducimus illum iure laboriosam, possimus provident quam sequi sint velit? Commodi eaque ex iure nobis praesentium ratione, rerum tempore ullam? Aut iure natus quisquam reprehenderit vero? Ab aliquam, amet animi dignissimos distinctio exercitationem fugiat id labore magni maiores natus neque, nihil nisi obcaecati quibusdam, repellat sit veritatis vero. Aliquam dolor fugit iste nesciunt optio porro quis ratione voluptas? Aliquam amet beatae blanditiis consequuntur dicta dolorum earum error explicabo impedit libero optio recusandae reiciendis, saepe. Consequatur, delectus eius fuga fugiat hic nihil possimus tempore temporibus vero? Accusantium, blanditiis expedita ipsa minima natus obcaecati praesentium quidem rem.
</div>
<script src="/dist/scrollbooster.min.js"></script>
<script>
const viewport = document.querySelector('.app');
Expand All @@ -62,6 +66,9 @@
${-data.position.x}px,
${-data.position.y}px
)`
},
onClick() {
console.log('clicked')
}
})
</script>
Expand Down
14 changes: 7 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "scrollbooster",
"description": "Enjoyable content drag-to-scroll library",
"version": "2.3.0",
"version": "3.0.0",
"author": "Ilya Shubin <[email protected]>",
"license": "MIT",
"main": "dist/scrollbooster.min.js",
Expand Down Expand Up @@ -29,13 +29,13 @@
],
"homepage": "https://ilyashubin.github.io/scrollbooster",
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-object-rest-spread": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"babel-loader": "^8.0.6",
"@babel/core": "^7.10.2",
"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
"@babel/preset-env": "^7.10.2",
"babel-loader": "^8.1.0",
"babel-plugin-add-module-exports": "^1.0.2",
"webpack": "^4.41.5",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
"webpack-dev-server": "^3.11.0"
}
}
28 changes: 14 additions & 14 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,12 @@ export default class ScrollBooster {
inputsFocus: true,
emulateScroll: false,
preventDefaultOnEmulateScroll: false, // 'vertical', 'horizontal'
pointerDownPreventDefault: true,
lockScrollOnDragDirection: false, // 'vertical', 'horizontal'
preventPointerMoveDefault: true,
lockScrollOnDragDirection: false, // 'vertical', 'horizontal', 'all'
dragDirectionTolerance: 40,
onPointerDown() {},
onPointerUp() {},
onPointerMove() {},
onClick() {},
onUpdate() {},
onWheel() {},
Expand Down Expand Up @@ -433,7 +436,7 @@ export default class ScrollBooster {
}

// prevent scroll if not expected scroll direction
if (this.props.lockScrollOnDragDirection) {
if (this.props.lockScrollOnDragDirection && this.props.lockScrollOnDragDirection !== 'all') {
if (dragDirection === this.props.lockScrollOnDragDirection && isTouch) {
this.dragPosition.x = this.dragStartPosition.x + this.dragOffset.x;
this.dragPosition.y = this.dragStartPosition.y + this.dragOffset.y;
Expand All @@ -453,6 +456,8 @@ export default class ScrollBooster {
this.events.pointerdown = (event) => {
isTouch = !!(event.touches && event.touches[0]);

this.props.onPointerDown(this.getState(), event, isTouch);

const eventData = isTouch ? event.touches[0] : event;
const { pageX, pageY, clientX, clientY } = eventData;

Expand Down Expand Up @@ -517,27 +522,22 @@ export default class ScrollBooster {

setDragPosition(event);
this.startAnimationLoop();

if (this.props.pointerDownPreventDefault) {
event.preventDefault();
}
};

this.events.pointermove = (event) => {
// prevent default scroll if scroll direction is locked
if (
this.props.lockScrollOnDragDirection &&
dragDirection === this.props.lockScrollOnDragDirection &&
event.cancelable
) {
if (event.cancelable && (this.props.lockScrollOnDragDirection === 'all' ||
this.props.lockScrollOnDragDirection === dragDirection)) {
event.preventDefault();
}
setDragPosition(event);
this.props.onPointerMove(this.getState(), event, isTouch);
};

this.events.pointerup = () => {
this.events.pointerup = (event) => {
this.isDragging = false;
dragDirection = null;
this.props.onPointerUp(this.getState(), event, isTouch);
};

this.events.wheel = (event) => {
Expand Down Expand Up @@ -591,7 +591,7 @@ export default class ScrollBooster {
event.preventDefault();
event.stopPropagation();
}
this.props.onClick(state, event);
this.props.onClick(state, event, isTouch);
};

this.events.contentLoad = () => this.updateMetrics();
Expand Down
Loading

0 comments on commit eabb1df

Please sign in to comment.