The purpose of the wheel:

Do the project need a scroll listening function, HTML structure has been written, do not want to use vUE components to write, because do not want to transform the HTML structure, so spent a few hours to do a simple, using VUE instructions to do, the project is enough to use the end. Later, I thought that it was better to perfect it and make it into plug-ins. It took more than two days.

Look at the effect

Major pits:

  • The scrolling animation effect is copiedvue-scrollactiveThe way to use the librarybezier-easing. Of course, this plugin is relative tovue-scrollactiveThe advantage is that I can specify the scroll container, not just the scroll under window.
  • The lower version of Chrome’s core DOM object does notscrollToMethod, usingdom.scrollTop = valueTo replace. Of course, this is due to poor basic knowledge…
  • Some browsers do not support itdocument.body.scrollTop; Some browsers do not support itdocument.documentElement.scrollTop. Ha ha da
  • When instructions operate on dom in VUE:insertedIs in thecreatedLater, inmountedbefore

features

  • Determines the current element in the window while scrolling
  • The exposed API scrollTo freely specifies the location to be rolled to
  • Scroll containers are freely specified, not limited to Windows
  • Vue instruction mode
  • There are no restrictions on listening to elements, and no ID or class tags are required. Of course, if you want to specify a scroll container, you must have an ID or class
  • There are no restrictions on the navigation list

defects

  • It’s not so dumb to use
  • Animations are not currently customizable
  • Currently, you cannot specify more than two scroll containers to listen to on a page

Open source address

Github.com/Desdesdesgo…