Zenscroll

https://zengabor.github.io/zenscroll/
Admin
Zenscroll is a lightweight vanilla JavaScript library for smooth animated vertical scrolling and...
Tokens:4,343
Snippets:61
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Zenscroll via npm

Source: https://zengabor.github.io/zenscroll

Use the npm package manager to install the library.

```bash
npm install zenscroll
```

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

### Retrieve current settings

Source: https://zengabor.github.io/zenscroll

The setup function returns an object containing the current defaultDuration and edgeOffset values.

```javascript
var currentSettings = zenscroll.setup()
var dd = currentSettings.defaultDuration
var eo = currentSettings.edgeOffset
```

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

### Configure custom scroller settings

Source: https://zengabor.github.io/zenscroll

Applies setup parameters to a custom scroller instance.

```javascript
myScroller.setup(500, 10)
```

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

### Set scroll duration

Source: https://zengabor.github.io/zenscroll

Examples of setting custom durations for various scroll functions. A duration of 0 disables smoothing.

```javascript
zenscroll.toY(50, 100) // 100ms == 0.1 second
```

```javascript
zenscroll.to(about, 500) // 500ms == half a second
```

```javascript
zenscroll.center(image2, 2000) // 2 seconds
```

```javascript
zenscroll.to(about, 0) // 0 milliseconds == no smoothing
```

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

### Disable automatic smoothing on local links

Source: https://zengabor.github.io/zenscroll

Set window.noZensmooth to true before loading the Zenscroll script to prevent automatic event handler installation.

```html
    ...
    <script>window.noZensmooth = true</script>
    <script src="zenscroll-min.js"></script>
</body>
```

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

### Get vertical scroll position

Source: https://zengabor.github.io/zenscroll

Retrieves the current vertical scroll position for the body or a specific scroller instance.

```javascript
var bodyY = zenscroll.getY()

var myDivY = myDivScroller.getY()
```

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

### Get top position of an element

Source: https://zengabor.github.io/zenscroll

Calculates the top position of an element relative to the body or a specific scroller. Note that the returned value excludes edge offsets and nested scrollable container calculations.

```javascript
var myElemY = zenscroll.getTopOf(myElem)

var relativeTopOfElem = myDivScroller.getTopOf(anElemInMyDiv)
```

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

### Enable native smooth-scrolling CSS

Source: https://zengabor.github.io/zenscroll

Set the scroll-behavior property to smooth on the body or specific containers to leverage native browser support.

```css
body, .smooth-container { scroll-behavior: smooth }
```

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

### Configure default duration and edge offset

Source: https://zengabor.github.io/zenscroll

Sets the default scroll duration in milliseconds and the edge offset in pixels for internal scrolls and direct calls.

```javascript
var defaultDuration = 777 // ms
var edgeOffset = 42 // px
zenscroll.setup(defaultDuration, edgeOffset)
```

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

### Execute callback after scroll completion

Source: https://zengabor.github.io/zenscroll

Provide a callback function as the last parameter to scroll methods to execute code once the animation finishes.

```javascript
// Last line of example 1:
zenscroll.intoView(container, 100, function () { myScroller.center(target) })

// Example 2:
zenscroll.intoView(container, 100, function () { myScroller.toY(35) })

// Example 3:
zenscroll.intoView(container, 100, function () { myScroller.intoView(target) })
```

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

### Additional scroller methods

Source: https://zengabor.github.io/zenscroll

Using the custom scroller instance to perform scroll operations.

```javascript
myScroller.toY(500)
```

```javascript
myScroller.intoView(target)
```

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

### Center an element with custom duration and offset

Source: https://zengabor.github.io/zenscroll

Centers an element with a specific duration in milliseconds and a vertical offset in pixels.

```javascript
var duration = 500 // milliseconds
var offset = 200 // pixels
zenscroll.center(image2, duration, offset)
```

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

### Include Zenscroll script tag

Source: https://zengabor.github.io/zenscroll

Place the script tag at the bottom of your page before the closing body tag.

```html
    ...
    <script src="zenscroll-min.js"></script>
</body>
```

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

### Scroll an element into view

Source: https://zengabor.github.io/zenscroll

Scrolls an element into the viewport. If the element is already visible, no action is taken.

```javascript
zenscroll.intoView(image1)
```

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

### Center an element on screen

Source: https://zengabor.github.io/zenscroll

Scrolls the specified element to the center of the viewport.

```javascript
zenscroll.center(image2)
```

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

### Update default duration only

Source: https://zengabor.github.io/zenscroll

Updates the default duration while leaving other settings unchanged by omitting the second parameter.

```javascript
zenscroll.setup(777) // only updates defaultDuration to 777
```

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

### Scroll inside a scrollable DIV

Source: https://zengabor.github.io/zenscroll

Instantiate a new scroller for a container element. The container must have a position property set to relative, absolute, or fixed.

```html
<div id="container" style="position: relative">
  <div id="item1">ITEM 1</div>
  <div id="item2">ITEM 2</div>
  <div id="item3">ITEM 3</div>
  <div id="item4">ITEM 4</div>
  <div id="item5">ITEM 5</div>
  <div id="item6">ITEM 6</div>
  <div id="item7">ITEM 7</div>
</div>

<script>
  var defaultDuration = 500
  var edgeOffset = 30
  var myDiv = document.getElementById("container")
  var myScroller = zenscroll.createScroller(myDiv, defaultDuration, edgeOffset)
  var target = document.getElementById("item4")
  myScroller.center(target)
</script>
```

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

### Postpone scroll after element resize

Source: https://zengabor.github.io/zenscroll

Use setTimeout to delay the scroll call when an element's size changes due to a transition.

```javascript
image.classList.remove("is-small")
setTimeout(function () { 
    zenscroll.intoView(image2) 
}, 500)
```

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

### Scroll to the top of an element

Source: https://zengabor.github.io/zenscroll

Use zenscroll.to to animate the scroll position to the top of a specific DOM element.

```javascript
var about = document.getElementById("about")
zenscroll.to(about)
```

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

### Scroll to a specific vertical position

Source: https://zengabor.github.io/zenscroll

Use zenscroll.toY to animate the scroll position to a specific vertical pixel coordinate.

```javascript
zenscroll.toY(50)
```

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

### Update edge offset only

Source: https://zengabor.github.io/zenscroll

Updates the edge offset while leaving the default duration unchanged by passing null as the first parameter.

```javascript
zenscroll.setup(null, 42) // only updates edgeOffset to 42
```

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

### Stop current scrolling

Source: https://zengabor.github.io/zenscroll

Immediately halts any ongoing scroll animation.

```javascript
zenscroll.stop()
```

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

### Check if scrolling is active

Source: https://zengabor.github.io/zenscroll

Returns a boolean indicating whether a scroll operation is currently in progress.

```javascript
var isScrolling = zenscroll.moving()
```
Tokens:
Raw