New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue2-smooth-scroll

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-smooth-scroll - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

src/index.js

2

dist/vue-smooth-scroll.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSmoothScroll=e():t.VueSmoothScroll=e()}(this,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){"use strict";function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var r;o.r(e);var i=function(t,e){return"HTML"===t.nodeName?-e:t.getBoundingClientRect().top+e};function u(){return{duration:500,offset:0,container:window,updateHistory:!0}}var c=Symbol("smoothScrollCtx");function f(t){var e=t.scrollTo,o=t.offset,n=t.duration,u=t.container,c=t.updateHistory,f=t.hash;r||(r=window.requestAnimationFrame||function(t){window.setTimeout(t,16)}),c&&window.history.pushState&&location.hash!==f&&window.history.pushState("","",f);var a=u.scrollTop||window.pageYOffset,l=i(e,a);l+=o;var d=Date.now();!function t(){var o,i=Date.now()-d,f=l;i<n?(f=a+(l-a)*((o=i/n)<.5?4*o*o*o:(o-1)*(2*o-2)*(2*o-2)+1),r(t)):c&&location.replace("#"+e.id),u===window?u.scrollTo(0,f):u.scrollTop=f}()}var a={install:function(t,e){t.directive("smooth-scroll",{inserted:function(t,o,r){if("object"===("undefined"==typeof window?"undefined":n(window))&&void 0!==window.pageYOffset){var i=Object.assign({},u());e&&Object.assign(i,e);var a=o.value||{},l=a.duration,d=a.offset,s=a.container,p=a.updateHistory;l=l||i.duration,d=d||i.offset,s=s||i.container,p=void 0!==p?p:i.updateHistory,"string"==typeof s&&(s=document.querySelector(s));var y=function(t){t.preventDefault();var e=r.data.attrs.href,o=document.getElementById(e.substring(1));o&&f({scrollTo:o,offset:d,duration:l,container:s,updateHistory:p,hash:e})};t.addEventListener("click",y),t[c]={clickHandler:y}}},unbind:function(t){t.removeEventListener("click",t[c].clickHandler),t[c]=null}}),t.prototype.$smoothScroll=function(t){return f(Object.assign({},u(),e,t))}}};e.default=a,"undefined"!=typeof window&&window.Vue&&window.Vue.use(a)}])}));
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSmoothScroll=e():t.VueSmoothScroll=e()}(this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var r;n.r(e);function i(){return{duration:500,offset:0,container:window,updateHistory:!0,easingFunction:null}}var u=Symbol("smoothScrollCtx");function c(t){var e=t.scrollTo,n=t.offset,o=t.duration,i=t.container,u=t.updateHistory,c=t.hash,f=t.easingFunction;r||(r=window.requestAnimationFrame||function(t){window.setTimeout(t,16)}),u&&window.history.pushState&&location.hash!==c&&window.history.pushState("","",c);var l,s,d=i.scrollTop||window.pageYOffset,p=(s=d,"HTML"===(l=e).nodeName?-s:l.getBoundingClientRect().top+s);p+=n;var y=Date.now(),b="function"==typeof f&&f||a;!function t(){var n=Date.now()-y,c=p;n<o?(c=d+(p-d)*b(n/o),r(t)):u&&location.replace("#"+e.id),i===window?i.scrollTo(0,c):i.scrollTop=c}()}var f={install:function(t,e){t.directive("smooth-scroll",{inserted:function(t,n,r){if("object"===("undefined"==typeof window?"undefined":o(window))&&void 0!==window.pageYOffset){var f=Object.assign({},i());e&&Object.assign(f,e);var a=n.value||{},l=a.duration,s=a.offset,d=a.container,p=a.updateHistory,y=a.easingFunction;l=l||f.duration,s=s||f.offset,d=d||f.container,p=void 0!==p?p:f.updateHistory,y=y||f.easingFunction,"string"==typeof d&&(d=document.querySelector(d));var b=function(t){t.preventDefault();var e=r.data.attrs.href,n=document.getElementById(e.substring(1));n&&c({scrollTo:n,offset:s,duration:l,container:d,updateHistory:p,hash:e,easingFunction:y})};t.addEventListener("click",b),t[u]={clickHandler:b}}},unbind:function(t){t.removeEventListener("click",t[u].clickHandler),t[u]=null}}),t.prototype.$smoothScroll=function(t){return c(Object.assign({},i(),e,t))}}};function a(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1}e.default=f,"undefined"!=typeof window&&window.Vue&&window.Vue.use(f)}])}));

31

package.json
{
"name": "vue2-smooth-scroll",
"version": "1.4.2",
"version": "1.5.0",
"description": "Simple vue smooth scroll",
"main": "dist/vue-smooth-scroll.min.js",
"main": "src/index.js",
"typings": "types/index.d.ts",
"scripts": {
"lint": "eslint src",
"lint": "eslint src --fix",
"build": "webpack"

@@ -32,9 +32,22 @@ },

"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"babel-loader": "^8.0.6",
"eslint": "^6.6.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.5"
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"eslint": "^7.4.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"lint-staged": {
"src/**/*.js": [
"npm run lint",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}

128

README.md

@@ -11,80 +11,109 @@ # Vue2 Smooth Scroll

> Simple vue smooth scroll extended from [vue-smooth-scroll](https://github.com/alamcordeiro/vue-smooth-scroll)
Lightweight Vue plugin for smooth-scrolling extended from [vue-smooth-scroll](https://github.com/alamcordeiro/vue-smooth-scroll).
For simple use-cases, the native [`scroll-behavior` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) (working draft) may be enough.
## Features
- **fixed SSR**
- fixed `duration` problem, now animation work good.
- support **scroll down** and **scroll up**
- support specific scroll container
- Optimize code
- Directive and programmatic API with global and local config overrides
- SSR
- Smooth, non-blocking animation using `requestAnimationFrame` (with fallback)
- Y-axis or vertical scrolling
- Specific scroll containers
- 1.3kB gzipped, 2.9kB min
## Instalation
## Installation
``` bash
# install dependency
npm install --save vue2-smooth-scroll
```
``` javascript
// import on your project (less then 1KB gziped)
import vueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(vueSmoothScroll)
``` js
import VueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(VueSmoothScroll)
```
## Directive usage
## Usage
### Directive
``` html
<a href="#div-id" v-smooth-scroll>Anchor</a>
<div id="div-id"></div>
<a href="#sec-3" v-smooth-scroll>Section 3</a>
<section id="sec-3"></section>
```
## Programmatic usage
### Programmatic
``` js
const exampleElement = this.$refs.exampleElement || this.$el || document.getElementById(...)
const myEl = this.$refs.myEl || this.$el || document.getElementById(...)
this.$smoothScroll({
scrollTo: exampleElement,
hash: '#exampleHash' // only required if updateHistory is true
... // optional overrides for global config
scrollTo: myEl,
hash: '#sampleHash' // required if updateHistory is true
})
```
## Custom options
### Defaults
``` js
{
duration: 500, // Animation speed
offset: 0, // Offset from element, you can use positive or negative values
container: '', // the scroll container, default is window,use document.querySelector to query the Element,
updateHistory: true //Push hash to history or not
}
```
### Example:
### Direct in `<script>`
``` html
<div id="container">
<a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container', updateHistory: false }">Anchor</a>
<div id="div-id"></div>
</div>
```
### Without Browserify or Webpack
``` html
<body>
<div id="app">
<a href="#bottom" v-smooth-scroll>click me will scroll to bottom!</a>
<a href="#bottom" v-smooth-scroll>Let's go to #bottom!</a>
<div style="height: 2000px;"></div>
<span id="bottom">bottom</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-smooth-scroll"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
var app = new Vue({
el: '#app'
})
</script>
</body>
```
## Custom options
### Defaults
``` js
{
duration: 500, // animation duration in ms
offset: 0, // offset in px from scroll element, can be positive or negative
container: '', // selector string or Element for scroll container, default is window
updateHistory: true // whether to push hash to history
easingFunction: null // gives the ability to provide a custom easing function `t => ...`
// (see https://gist.github.com/gre/1650294 for examples)
// if nothing is given, it will defaults to `easeInOutCubic`
}
```
### Global
``` js
import VueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(VueSmoothScroll, {
duration: 400,
updateHistory: false,
})
```
### Directive:
``` html
<div id="container">
<a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container' }">Anchor</a>
<div id="div-id"></div>
</div>
```
### Programmatic
``` js
this.$smoothScroll({
scrollTo: this.$refs.myEl,
duration: 1000,
offset: -50,
})
```
## License

@@ -94,2 +123,3 @@

## Contributors ✨

@@ -113,2 +143,2 @@

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

1

types/index.d.ts

@@ -13,2 +13,3 @@ import Vue, { PluginFunction } from "vue";

hash?: string; // required if updateHistory is true
easingFunction?: Function
}

@@ -15,0 +16,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc