:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

Overview

vue-seamless-scroll

A simple, Seamless scrolling for Vue.js

Features

  • Initial configuration support
  • Compatible with multiple platforms
  • Multi-technology stack version support

Documentation

To check out live examples and docs, visit vue-seamless-scroll-doc.

Cares

If you want js to scroll seamlessly (without dependencies) you can switch to here.seamscroll.

Contribution

Welcome to give some Suggestions and optimizations, and look forward to your Pull Request.

License

vue-seamless-scroll is open source and released under the MIT License.

You might also like...
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Vue plugin to disable scrolling page

Vue plugin to disable scrolling page

A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

Lightweight Vue plugin for smooth-scrolling.
Lightweight Vue plugin for smooth-scrolling.

Vue Smooth Scroll Lightweight Vue plugin for smooth-scrolling. For simple use-cases, the native scroll-behavior CSS property (working draft) may be en

A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

🍹 Next-gen compact native smooth scrolling components for Vue 3

🍹 Next-gen compact native smooth scrolling component library for Vue 3 ⚡ No scrollbar reinventing using DOM elements, no weird logic, only native scr

Vue Scroll Detect - Detect component visibility change on scrolling

Vue Scroll Detect Detect component visibility change on scrolling. Installation yarn add vue-scroll-detect Example See examples/ at Code Sandbox Usage

Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

Vue3 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll. For simple use-cases, the native scroll-behavior CSS

Comments
  • Vue v2.5.11下,切换路由时报错‘Uncaught TypeError: Cannot read property 'offsetHeight' of undefined’

    Vue v2.5.11下,切换路由时报错‘Uncaught TypeError: Cannot read property 'offsetHeight' of undefined’

    #error

    Uncaught TypeError: Cannot read property 'offsetHeight' of undefined
        at eval (vue-seamless-scroll.min.js?919b:1)
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    requestAnimationFrame (async)
    _move @ vue-seamless-scroll.min.js?919b:1
    boundFn @ vue.esm.js?efeb:189
    (anonymous) @ vue-seamless-scroll.min.js?919b:1
    

    #template

    <vue-seamless-scroll :data="rewardList" :class-option="seamlessOption" class="warp">
      <ul class="item">
        <li v-for="(item, index) in rewardList" :key="index">
          <p class="name">{{ item.nickname }}</p>
          <p class="reward-type">{{ `${item.amount}${rewardTypeList[item.type]}` }}</p>
          <!-- <p class="cell-phone">{{ item.cellPhone }}</p> -->
        </li>
      </ul>
    </vue-seamless-scroll>
    

    #seamlessOption

    seamlessOption: {
      step: 0.25,
      limitMoveNum: 5,
    },
    

    #version

    "dependencies": {
      "alloyfinger": "^0.1.11",
      "clipboard": "^1.7.1",
      "exif-js": "^2.3.0",
      "fastclick": "^1.0.6",
      "vue": "^2.5.2",
      "vue-resource": "^1.3.4",
      "vue-router": "^3.0.1",
      "vue-seamless-scroll": "^1.0.5",
      "vuex": "^2.1.1",
      "vuex-i18n": "^1.3.1",
      "vux": "^2.2.0"
    },
    
    wontfix 
    opened by lkangd 5
  • 列表第一项无法点击,加载页面时快速滚动走了,希望大大可以提供下解决方法!!

    列表第一项无法点击,加载页面时快速滚动走了,希望大大可以提供下解决方法!!

    classOption () { return { singleHeight: this.lineHeight, waitTime: 5, limitMoveNum: 3, step: 1, hoverStop: true }; } 配置如上,列表第一项不能触发点击事件;只有当autoPlay为false时,才可以点击列表第一项; 另外,加载页面时,列表第一项飞速就滚动上去了,没有停留; 希望大大可以提供下解决方法!!

    opened by yukaihua1997 3
  • 加载后不会滚动,需要手动用鼠标移上去触发一次后才会滚动

    加载后不会滚动,需要手动用鼠标移上去触发一次后才会滚动

    <vue-seamless-scroll :data="repairInfo.info" class="seamless-warp">
      <div v-for="(item, index) in repairInfo.info" :key="index">
        <span v-text="item" />
      </div>
    </vue-seamless-scroll>
    

    以上是我的页面的代码,repaireInfo.info是从后台获取的list对象 页面默认初始化时是空的list

    data() {
      return {
        repaireInfo:{
          info: []
        }
      }
    }
    

    但是在进入页面后,数据并不会滚动,需要手动移到组件上面一次,查看文档发现有autoPlay属性,但是代码并没有设置这个属性为false。

    opened by 418545106 0
  • 添加 控制停止滚动方法

    添加 控制停止滚动方法

    tab切换数据,有些列表长度不够,不能滚动,要停止滚动

    路径: node_modules\vue-seamless-scroll\dist\vue-seamless-scroll.min.js

    搜索 methods ,增加以下代码 methods:{ clearTime(){clearTimeout(this.singleWaitTime)},

    重新运行 this.$refs.xxx.clearTime(); //停止滚动 this.$refs.xxx.reset(); //配合使用

    opened by jiudan 0
Releases(v1.1.12)
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. Th

null 0 May 10, 2022
↕ A simple but fast & powerful library to animate HTML elements while scrolling pages.

Vue Scroll Animator ↕ A simple but fast & powerful library to animate HTML elements while scrolling pages. Installation npm install @byloth/vue-scroll

Matteo Bilotta 0 May 19, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

xlaoyu 119 Aug 22, 2022
Vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

vue-slidePage Introduction vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage Demo simple custom Usage Install $ npm i -S

null 16 Nov 12, 2021
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

CoddiCat 24 Sep 9, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022