npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-smoothie

v1.2.0

Published

🍹 Next-gen native smooth scrolling component library for Vue 3

Downloads

22

Readme

🍹 Next-gen compact native smooth scrolling component library for Vue 3

No scrollbar reinventing using DOM elements, no weird logic, only native scroll event, a sprinkle of CSS magic and the power of ResizeObserver.

Native means the library doesn't interfere with scroll logic at all. Every scroll feature works as it should be.

DEMO (EXAMPLE SOURCE)

npm npm Discord

Installation:

pnpm add vue-smoothie
# or
yarn add vue-smoothie
# or
npm i vue-smoothie

Usage:

You should use the component as a container element for your scrollable content. The container has overflow: auto by default.

<script setup>
import { Smoothie } from "vue-smoothie";
</script>

<template>
  <Smoothie class="container">
    <div>
      <p>Test paragraph</p>
    </div>
  </Smoothie>
</template>

<style>
.container {
  /* define height and/or width */
}
</style>

There are two flavors of the component:

  • Smoothie - use this when you only need vertical scroll.
  • OmniSmoothie - use this when you need both vertical and horizontal scroll. In this case prefer using OmniSmoothie component for all scrollable areas even if they're vertical-only to prevent bundling both flavors simultaneously.
⚠ Currently there's a bug on Firefox for horizontal scroll, which adds an extra scroll space based on scroll speed

weight prop

You can setup how smooth the scrolling is by specifying an optional weight prop: <Smoothie :weight="0.03"> The lower the value the lazier transition

Exposed properties

Both flavors expose an object via ref with properties:

  • el - container DOM element (available in onMounted hook)
  • x and y - current smooth scroll position (x only in Omni)

Common issues

  • To make root (App) view work with smoothie you have to pass down overflow to the smoothie element. One way of doing so is:

    html,
    body,
    #app,
    .container {
      height: 100%;
    }

    where #app is the element you mount your Vue application on and .container a class applied to root <smoothie> element

  • Instead of styling #app with padding and etc, better style scroll container

  • Don't forget about box-sizing: border-box when a container has border and/or padding to accommodate it into its width and height to prevent multiple scrollbars, root-level (<html>) scrollbar overtaking overflow and other issues

  • Scrollbar appears inside of page not at a side - you need to set width to 100%