diff --git a/.gitignore b/.gitignore index 91dfed8..d21eb09 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store -node_modules \ No newline at end of file +node_modules +playground \ No newline at end of file diff --git a/dist/plain-scroll.min.esm.js b/dist/plain-scroll.min.esm.js deleted file mode 100644 index 533cb09..0000000 --- a/dist/plain-scroll.min.esm.js +++ /dev/null @@ -1 +0,0 @@ -var ease={linear:function(t){return t},easeIn:function(t){return t*t},easeOut:function(t){return t*(2-t)},easeInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1}},PlainScroll=function(){function t(t){var n=void 0===t?{}:t,e=n.trigger,i=void 0===e?".plain-scroll":e,o=n.duration,r=void 0===o?1e3:o,s=n.easing,a=void 0===s?"easeOut":s,l=n.onScrollStart,c=void 0===l?function(){}:l,u=n.onScrollEnd,d=void 0===u?function(){}:u,f=this;this.options={trigger:i,duration:r,easing:a,onScrollStart:c,onScrollEnd:d},this.start={position:0,time:0},this.end={position:0},this.ease=ease;var p=document.querySelectorAll(this.options.trigger);Array.from(p).forEach(function(t){var n=document.getElementById(t.getAttribute("href").replace("#",""));t.addEventListener("click",function(t){t.preventDefault(),f.options.onScrollStart(),f.start.time=(new Date).getTime(),f.start.position=window.scrollY,f.end.position=f.getOffset(n).top-f.start.position,f.animate()})})}return t.prototype.animate=function(){var t=this,n=(new Date).getTime()-this.start.time,e=n>=this.options.duration,i=n/this.options.duration;i=i>1?1:i;var o=this.ease[this.options.easing](i)*this.end.position+this.start.position;window.scrollTo(0,o),e?(window.cancelAnimationFrame(this.requestFrame),this.options.onScrollEnd()):this.requestFrame=window.requestAnimationFrame(function(){return t.animate()})},t.prototype.getOffset=function(t){var n=t.getBoundingClientRect();return{top:n.top+window.pageYOffset-document.documentElement.clientTop,left:n.left+window.pageXOffset-document.documentElement.clientLeft}},t}();export default PlainScroll; diff --git a/readme.md b/readme.md index d6da166..03914ca 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -Simple and minimal size scroll library. +Simple and lightweight size scroll library. # Installing ~~~ @@ -6,35 +6,49 @@ npm install plainScroll ~~~ # Usage -PlainScroll is easy to usage. Insert the following code into your project. +PlainScroll is simple to usage. Insert the following code into your project. ~~~ import PlainScroll from 'plainScroll'; ~~~ -Next, create a instance. You can set options at the same time. Each default parameter has a trigger of 'plainScroll' as class name to start scrolling, duration of 1000 milliseconds as time at animation, easing of 'easeOut' as animation effect, you can set either for 'linear', 'easeIn', 'easeOut', 'easeInOut'. +Next, create a instance. ~~~ new PlainScroll(); // or set option new PlainScroll({ - trigger: 'plainScroll', + trigger: '.plain-scroll', duration: 1000, easing: 'easeOut' + onScrollStart: () => console.log('start'), + onScrollEnd: () => console.log('end') }); ~~~ Finally, attach the trigger name to anchor tag, prepare the element you want to scroll. ~~~ - - -
+
+
~~~ +# Option +You can set options at the same time you create an instance. +## trigger +Class name for starting scrolling, set to anchor tag. + Default set is '.plain-scroll'. +## duration +It is time to scroll to the destination. Default set is 1000 milliseconds. +## easing +Add inertia to the scroll. You can set either for 'linear', 'easeIn', 'easeOut', 'easeInOut'. Default set is 'easeOut'. +## callback +You can run any function at start and end of scroll. + # Support Borwser +Support for stable version in the modern browsers and Internet Explorer 11. - Chrome - Firefox - Safari -- Internet Explorer 11 - Edge +- Internet Explorer 11 # License MIT @darumock \ No newline at end of file diff --git a/rollup.config.js b/rollup.config.js index 2310bb2..06bdfc9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -44,10 +44,6 @@ export default () => { file: 'dist/plain-scroll.min.js', name: 'PlainScroll', format: 'umd' - }, - { - file: 'dist/plain-scroll.min.esm.js', - format: 'esm' } ], plugins: [