126 | ``` 127 | 128 | #### Scroll to non-existing query selector 129 | 130 | When the `target` prop is given but no node matches, a console error will appear. 131 | 132 | ```html 133 | 134 |

135 | 136 |

137 | ``` 138 | 139 | ```js 140 | Error: Could not scroll to #my-target 141 | ``` 142 | 143 | ### Custom scroll function 144 | 145 | Most users are satisfied with the default scroll function provided by *VueNextLevelScroll* 146 | However if you need other behavior you can simply write your own function: 147 | 148 | ```html 149 | 157 | 158 | 165 | ``` 166 | 167 | You might not need the polyfill then as well :wink: 168 | 169 | ## :gear: Contributing 170 | 171 | Please see our [CONTRIBUTING.md](./CONTRIBUTING.md) 172 | 173 | 174 | ## :bookmark_tabs: License 175 | 176 | [MIT License](./LICENSE.md) - Copyright (c) Developmint - Alexander Lichter 177 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] } 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-next-level-scroll", 3 | "version": "1.2.0", 4 | "description": "Bring your scroll game to the next level", 5 | "author": "Alexander Lichter ", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/Developmint/vue-next-level-scroll" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/Developmint/vue-next-level-scroll/issues" 13 | }, 14 | "main": "dist/vue-next-level-scroll.cjs.js", 15 | "module": "dist/vue-next-level-scroll.es.js", 16 | "cdn": "dist/vue-next-level-scroll.min.js", 17 | "unpkg": "dist/vue-next-level-scroll.min.js", 18 | "jsdelivr": "dist/vue-next-level-scroll.min.js", 19 | "scripts": { 20 | "dev": "nuxt test/fixture", 21 | "lint": "eslint src test", 22 | "test": "npm run lint && jest", 23 | "build": "bili --format cjs,es,umd,umd-min --moduleName nextLevelScroll --no-babel.babelrc", 24 | "release": "npm run build && standard-version && git push --follow-tags && npm publish", 25 | "commitlint": "commitlint -e $GIT_PARAMS", 26 | "coverage": "codecov" 27 | }, 28 | "sideEffects": false, 29 | "files": [ 30 | "src", 31 | "dist" 32 | ], 33 | "keywords": [ 34 | "vue", 35 | "vuejs", 36 | "scroll", 37 | "component", 38 | "plugin" 39 | ], 40 | "engines": { 41 | "node": ">=8.0.0", 42 | "npm": ">=5.0.0" 43 | }, 44 | "jest": { 45 | "moduleFileExtensions": [ 46 | "js", 47 | "json", 48 | "vue" 49 | ], 50 | "transform": { 51 | "^.+\\.js$": "/node_modules/babel-jest", 52 | ".*\\.(vue)$": "/node_modules/vue-jest" 53 | }, 54 | "moduleNameMapper": { 55 | "^@/(.*)$": "/lib/$1" 56 | }, 57 | "snapshotSerializers": [ 58 | "/node_modules/jest-serializer-vue" 59 | ], 60 | "collectCoverage": true, 61 | "coveragePathIgnorePatterns": [ 62 | "/node_modules/", 63 | "/test/fixtures" 64 | ] 65 | }, 66 | "devDependencies": { 67 | "@commitlint/cli": "^7.2.1", 68 | "@commitlint/config-conventional": "^7.1.2", 69 | "@nuxtjs/eslint-config": "0.0.1", 70 | "@vue/server-test-utils": "^1.0.0-beta", 71 | "@vue/test-utils": "^1.0.0-beta", 72 | "babel-core": "^6.26.3", 73 | "babel-eslint": "^10.0.1", 74 | "babel-jest": "^23.6.0", 75 | "babel-loader": "^8.0.4", 76 | "babel-preset-vue-app": "^2.0.0", 77 | "bili": "^4.0.0", 78 | "cheerio": "^1.0.0-rc.2", 79 | "codecov": "latest", 80 | "eslint": "^5.8.0", 81 | "eslint-config-standard": "^12.0.0", 82 | "eslint-plugin-import": "^2.14.0", 83 | "eslint-plugin-jest": "latest", 84 | "eslint-plugin-node": "^8.0.0", 85 | "eslint-plugin-promise": "^4.0.1", 86 | "eslint-plugin-standard": "^4.0.0", 87 | "eslint-plugin-vue": "^4.7.1", 88 | "flush-promises": "^1.0.2", 89 | "husky": "^1.1.3", 90 | "jest": "latest", 91 | "jest-serializer-vue": "^2.0.2", 92 | "jsdom": "latest", 93 | "standard-version": "latest", 94 | "vue-jest": "^3.0.0", 95 | "vue-loader": "^15.4.2", 96 | "vue-router": "^3.0.1", 97 | "vue-server-renderer": "^2.5.17", 98 | "vue-template-compiler": "^2.5.17" 99 | }, 100 | "dependencies": { 101 | "vue": "^2.5.17" 102 | }, 103 | "husky": { 104 | "hooks": { 105 | "pre-commit": "npm run lint", 106 | "commit-msg": "npm run commitlint" 107 | } 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | functional: true, 3 | render(h, { children, data, props: { target, scrollFunction, shouldNavigate = false, navigationType = 'push', tag = 'div' }, parent: { $router }, _ssrNode }) { 4 | const clickFunction = () => { 5 | const fn = scrollFunction || defaultScrollFunction 6 | fn(target, { shouldNavigate, navigationType, $router }) 7 | } 8 | 9 | return h(tag, { 10 | ...data, 11 | on: { 12 | // Ignore scroll function on server side 13 | click: _ssrNode || process.server ? undefined : clickFunction 14 | } 15 | }, children) 16 | } 17 | } 18 | 19 | const defaultScrollFunction = async (rawTarget, { shouldNavigate, navigationType, $router }) => { 20 | const target = (typeof rawTarget === 'function') ? await rawTarget() : rawTarget 21 | // If no target given, auto scroll to top 22 | if (!target) { 23 | window.scroll({ 24 | top: 0, 25 | behavior: 'smooth' 26 | }) 27 | if (shouldNavigate && $router) { 28 | const currentRoute = $router.currentRoute 29 | const hash = currentRoute.hash 30 | const fullPath = currentRoute.fullPath 31 | const newPath = fullPath.replace(hash, '') 32 | navigate($router, newPath, navigationType) 33 | } 34 | return 35 | } 36 | 37 | const node = document.querySelector(target) 38 | 39 | // If target prop is present but the node does not exist, send an error 40 | if (!node) { 41 | // eslint-disable-next-line no-console 42 | return console.error(`Could not scroll to ${target}`) 43 | } 44 | 45 | node.scrollIntoView({ 46 | behavior: 'smooth' 47 | }) 48 | 49 | if (shouldNavigate && $router) { 50 | navigate($router, target, navigationType) 51 | } 52 | } 53 | 54 | const navigate = ($router, path, type) => { $router[type](path) } 55 | -------------------------------------------------------------------------------- /test/ScrollNextLevel.spec.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | import { createLocalVue, mount } from '@vue/test-utils' 3 | import { render } from '@vue/server-test-utils' 4 | import flushPromises from 'flush-promises' 5 | import VueRouter from 'vue-router' 6 | import ScrollNextLevel from '../src' 7 | import Target from './fixtures/Target' 8 | 9 | const targetString = '#target' 10 | 11 | describe('ScrollNextLevel', () => { 12 | let spy 13 | 14 | beforeAll(() => { 15 | global.scroll = () => {} 16 | }) 17 | 18 | beforeEach(() => { 19 | Element.prototype.scrollIntoView = () => {} 20 | }) 21 | 22 | afterEach(() => { 23 | if (spy) { 24 | try { 25 | spy.mockClear() 26 | } catch (e) {} 27 | spy = undefined 28 | } 29 | }) 30 | 31 | describe('default scroll', () => { 32 | describe('clicked', () => { 33 | it('does scroll to top without target', () => { 34 | spy = jest.spyOn(global, 'scroll') 35 | const wrapper = mount(ScrollNextLevel, { 36 | attachToDocument: true 37 | }) 38 | 39 | expect(spy).toHaveBeenCalledTimes(0) 40 | 41 | wrapper.trigger('click') 42 | 43 | expect(spy).toBeCalledWith({ 44 | top: 0, 45 | behavior: 'smooth' 46 | }) 47 | }) 48 | 49 | it('does navigate to path without hash when enabled and scroll to top', () => { 50 | spy = jest.spyOn(global, 'scroll') 51 | const localVue = createLocalVue() 52 | localVue.use(VueRouter) 53 | const router = new VueRouter() 54 | 55 | const wrapper = mount(ScrollNextLevel, { 56 | attachToDocument: true, 57 | context: { 58 | props: { 59 | shouldNavigate: true 60 | } 61 | }, 62 | localVue, 63 | router 64 | }) 65 | 66 | router.replace('#test') 67 | 68 | expect(spy).toHaveBeenCalledTimes(0) 69 | 70 | wrapper.trigger('click') 71 | 72 | expect(spy).toBeCalledWith({ 73 | top: 0, 74 | behavior: 'smooth' 75 | }) 76 | expect(router.currentRoute.fullPath).toBe('/') 77 | }) 78 | 79 | it('does smooth scroll to target when present', () => { 80 | spy = jest.spyOn(Element.prototype, 'scrollIntoView') 81 | 82 | const wrapper = mount(ScrollNextLevel, { 83 | attachToDocument: true, 84 | context: { 85 | props: { 86 | target: targetString 87 | } 88 | }, 89 | slots: { 90 | default: Target 91 | } 92 | }) 93 | 94 | expect(wrapper.html()).toBe('

') 95 | 96 | expect(wrapper.contains(targetString)).toBe(true) 97 | 98 | const element = wrapper.find(targetString).element 99 | 100 | expect(element.scrollIntoView).toHaveBeenCalledTimes(0) 101 | 102 | wrapper.trigger('click') 103 | 104 | expect(element.scrollIntoView).toBeCalledWith({ 105 | behavior: 'smooth' 106 | }) 107 | }) 108 | 109 | it('does navigate to target after smooth-scrolling', () => { 110 | spy = jest.spyOn(Element.prototype, 'scrollIntoView') 111 | const localVue = createLocalVue() 112 | localVue.use(VueRouter) 113 | const router = new VueRouter() 114 | 115 | const wrapper = mount(ScrollNextLevel, { 116 | attachToDocument: true, 117 | context: { 118 | props: { 119 | target: targetString, 120 | shouldNavigate: true 121 | } 122 | }, 123 | slots: { 124 | default: Target 125 | }, 126 | localVue, 127 | router 128 | }) 129 | 130 | expect(wrapper.html()).toBe('

') 131 | 132 | expect(wrapper.contains(targetString)).toBe(true) 133 | 134 | const element = wrapper.find(targetString).element 135 | 136 | expect(element.scrollIntoView).toHaveBeenCalledTimes(0) 137 | 138 | wrapper.trigger('click') 139 | 140 | expect(element.scrollIntoView).toBeCalledWith({ 141 | behavior: 'smooth' 142 | }) 143 | 144 | expect(router.currentRoute.fullPath).toBe(`/${targetString}`) 145 | }) 146 | 147 | it('does send error if target is set but not present', () => { 148 | const weirdTarget = 'weird things here' 149 | spy = jest.spyOn(console, 'error') 150 | 151 | const wrapper = mount(ScrollNextLevel, { 152 | attachToDocument: true, 153 | context: { 154 | props: { 155 | target: weirdTarget 156 | } 157 | } 158 | }) 159 | 160 | expect(spy).toHaveBeenCalledTimes(0) 161 | 162 | wrapper.trigger('click') 163 | 164 | expect(spy).toBeCalledWith(`Could not scroll to ${weirdTarget}`) 165 | }) 166 | 167 | it('does smooth scroll to target (as function) when present', async () => { 168 | spy = jest.spyOn(Element.prototype, 'scrollIntoView') 169 | 170 | const wrapper = mount(ScrollNextLevel, { 171 | attachToDocument: true, 172 | context: { 173 | props: { 174 | target: async () => { 175 | await Promise.resolve(r => setTimeout(r, Math.random() * 500)) 176 | return targetString 177 | } 178 | } 179 | }, 180 | slots: { 181 | default: Target 182 | } 183 | }) 184 | 185 | expect(wrapper.html()).toBe('

') 186 | 187 | expect(wrapper.contains(targetString)).toBe(true) 188 | 189 | const element = wrapper.find(targetString).element 190 | 191 | expect(element.scrollIntoView).toHaveBeenCalledTimes(0) 192 | 193 | wrapper.trigger('click') 194 | 195 | await flushPromises() 196 | 197 | expect(element.scrollIntoView).toHaveBeenCalledTimes(1) 198 | 199 | expect(element.scrollIntoView).toBeCalledWith({ 200 | behavior: 'smooth' 201 | }) 202 | }) 203 | }) 204 | }) 205 | 206 | describe('custom scroll function', () => { 207 | it('does not call custom function if not clicked', () => { 208 | const spy = jest.fn() 209 | mount(ScrollNextLevel, { 210 | context: { 211 | props: { 212 | scrollFunction: spy 213 | } 214 | }, 215 | attachToDocument: true 216 | }) 217 | 218 | expect(spy).toHaveBeenCalledTimes(0) 219 | }) 220 | 221 | it('calls custom function on click', () => { 222 | const spy = jest.fn(() => {}) 223 | const wrapper = mount(ScrollNextLevel, { 224 | context: { 225 | props: { 226 | scrollFunction: spy 227 | } 228 | }, 229 | attachToDocument: true 230 | }) 231 | wrapper.trigger('click') 232 | 233 | expect(spy).toBeCalledWith(undefined, { $parent: undefined, navigationType: 'push', shouldNavigate: false }) 234 | }) 235 | 236 | it('calls custom function with target on click', () => { 237 | const spy = jest.fn(() => {}) 238 | const wrapper = mount(ScrollNextLevel, { 239 | context: { 240 | props: { 241 | scrollFunction: spy, 242 | target: targetString 243 | } 244 | }, 245 | attachToDocument: true 246 | }) 247 | wrapper.trigger('click') 248 | 249 | expect(spy).toBeCalledWith(targetString, { 250 | $parent: undefined, 251 | navigationType: 'push', 252 | shouldNavigate: false 253 | }) 254 | }) 255 | }) 256 | 257 | describe('SSR', () => { 258 | it('does nothing on server-side', (done) => { 259 | try { 260 | render(ScrollNextLevel, { 261 | context: { 262 | props: { 263 | targetString 264 | } 265 | }, 266 | slots: { 267 | default: Target 268 | } 269 | }) 270 | done() 271 | } catch (e) { } 272 | }) 273 | }) 274 | }) 275 | -------------------------------------------------------------------------------- /test/fixtures/Target.vue: -------------------------------------------------------------------------------- 1 | 4 | --------------------------------------------------------------------------------