Vue Smoothie

https://github.com/zeokku/vue-smoothie
Admin
Vue Smoothie is a compact, native smooth scrolling component library for Vue 3, which leverages...
Tokens:1,401
Snippets:11
Trust Score:6.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Vue Smoothie

Source: https://github.com/zeokku/vue-smoothie/blob/main/README.md

This snippet shows how to install the Vue Smoothie library using different package managers like pnpm, yarn, and npm.

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

--------------------------------

### Exposing Component Refs with shallowRef

Source: https://github.com/zeokku/vue-smoothie/blob/main/notes.md

Demonstrates how to expose component's x and y references using Vue's `shallowRef`. This allows for direct manipulation and observation of these reactive properties from outside the component.

```javascript
const x = shallowRef(0);
const y = shallowRef(0);
```

```javascript
exposed.x.value = ...;
```

--------------------------------

### Bezier Curves for Transitions

Source: https://github.com/zeokku/vue-smoothie/blob/main/notes.md

Proposes using Bezier curves for transition animations in version 2.0, replacing the current 'weight' property with 'duration' for better control over the animation's timing and feel.

```javascript
use bezier curves for transition and replace weight by duration
```

--------------------------------

### Vite Environment Variable Handling

Source: https://github.com/zeokku/vue-smoothie/blob/main/notes.md

Explains how Vite handles environment variables. When `NODE_ENV` is set to 'development', `__file` is exposed. If an environment variable is not set, Vite exposes the entire `import.meta.env` object instead of replacing the variable with `undefined`.

```javascript
# `__file` exposed in code when `NODE_ENV=development`
```

```javascript
# when env var is not set Vite exposes entire `import.meta.env` object instead of replacing the var by undefined
```

--------------------------------

### CSS for Root-Level Scrolling with Vue Smoothie

Source: https://github.com/zeokku/vue-smoothie/blob/main/README.md

Provides CSS rules necessary for making the root application view work correctly with Vue Smoothie. This involves setting height to 100% for html, body, the app mount point, and the smoothie container to ensure proper overflow handling.

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

--------------------------------

### Basic Usage of Smoothie Component in Vue 3

Source: https://github.com/zeokku/vue-smoothie/blob/main/README.md

Demonstrates the basic integration of the `Smoothie` component within a Vue 3 application. The `Smoothie` component acts as a container for scrollable content and requires explicit height or width to be defined in its CSS.

```vue
<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>
```

--------------------------------

### Configuring Scroll Smoothness with 'weight' Prop

Source: https://github.com/zeokku/vue-smoothie/blob/main/README.md

Shows how to adjust the scrolling smoothness using the optional `weight` prop on the `Smoothie` or `OmniSmoothie` component. A lower `weight` value results in a lazier transition.

```vue
<Smoothie :weight="0.03">
  <!-- scrollable content -->
</Smoothie>
```

--------------------------------

### Firefox Bounce Bug Resolution Strategies

Source: https://github.com/zeokku/vue-smoothie/blob/main/notes.md

Explores strategies to fix a persistent bounce bug on Firefox, triggered when a spacer element is smaller than the sticky content. The bug arises because `display: flex` inflates the sticky element's scrollHeight. Potential fixes include making the sticky child take no space (`height: 0`, `max-height: 0`, `position: absolute`), though each has limitations.

```javascript
it's triggered when spacer is smaller (for some fucking reason) than sticky's content, so it bounces to the top at the difference between spacer and content's scroll height
```

```javascript
interesting that `display: flex` changes scrollHeight of the sticky element and it's bigger than its contents. this is why flex caused the bounce, because spacer was not enough
```

```javascript
key direction for fixing the infinite scroll bug is to make sticky's child take no space or remove it from the flow.
```

```javascript
`height: 0` - is not an option because we need a working resize observer
```

```javascript
`max-height: 0` - is also not an option, even though with this resize observer works, scroll height is always wrong at the initial rendering. i have no idea why and there's no option to set it to a proper height
```

```javascript
`position: absolute` - promising option and regular flavor works great for vertical scroll but omni becomes broken for this one due to `width: 0` for sticky to prevent filling additional horizontal space
```

```javascript
it is possible to just add a prop prolly to set horizontal scroll
```

--------------------------------

### Usage of OmniSmoothie Component in Vue 3

Source: https://github.com/zeokku/vue-smoothie/blob/main/README.md

Illustrates how to use the `OmniSmoothie` component for enabling both vertical and horizontal scrolling. It is recommended to use `OmniSmoothie` for all scrollable areas to avoid bundling unnecessary code.

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

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

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

--------------------------------

### Firefox Scroll Bug Fixes: display: flex and Child Height

Source: https://github.com/zeokku/vue-smoothie/blob/main/notes.md

Details two key fixes for Firefox scroll bugs. The 'bounce to top' issue was resolved by removing `display: flex`. The 'infinite scroll' issue was fixed by setting the height of the sticky element's child to 0, which corrects scrollHeight calculation.

```javascript
bounce to top at the scroll end was caused by `display flex`!
```

```javascript
infinite scroll was caused by the child of sticky element as I said before, so setting its height to 0 fixes this, while scrollHeight is correctly calculated
```

--------------------------------

### Firefox Scroll Height Bug Fix with overflow: hidden

Source: https://github.com/zeokku/vue-smoothie/blob/main/notes.md

Addresses an infinite scroll bug in Firefox caused by incorrect overflow behavior. When an element is translated upwards, Firefox incorrectly accommodates its scroll height. Applying `overflow: hidden` to the sticky wrapper seems to resolve this.

```css
setting sticky wrapper to overflow: hidden
```
Tokens:
Raw