Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
clementroche committed Oct 3, 2023
1 parent c4a854d commit 755f1d3
Showing 1 changed file with 6 additions and 33 deletions.
39 changes: 6 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,48 +166,21 @@ html.lenis {

## Considerations

#### Make sure `scroll-behavior` is set to `auto` or not set at all

```css
.lenis.lenis-smooth {
scroll-behavior: auto;
}
```

#### Keep HTML elements default sized, this is necessary for Webflow implementation ([see issue](https://github.com/studio-freight/lenis/issues/10))

```css
html.lenis {
height: auto;
}
```

#### Use the `data-lenis-prevent` attribute on nested scroll elements. In addition, we advise you to add `overscroll-behavior: contain` on this element

### Nested scroll
```html
<div data-lenis-prevent>scroll content</div>
```

```css
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
```
<div data-lenis-prevent-wheel>scroll content</div>

#### Manually use `lenis.scrollTo('#anchor')` on anchor link click ([see issue](https://github.com/studio-freight/lenis/issues/19))
<div data-lenis-prevent-touch>scroll content</div>
```

### Anchor links
```html
<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>
```

#### Hide overflow when lenis is stopped
```css
.lenis.lenis-stopped {
overflow: hidden;
}
```

#### GSAP ScrollTrigger integration
### GSAP ScrollTrigger integration
```js
const lenis = new Lenis()

Expand Down

2 comments on commit 755f1d3

@vercel
Copy link

@vercel vercel bot commented on 755f1d3 Oct 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"⚡️ Lighthouse report for the changes in this commit:

🔴 Performance: 37
🟠 Accessibility: 88
🟢 Best practices: 100
🟠 SEO: 67
🔴 PWA: 0

Lighthouse ran on https://greensock.com/requires-membership/?plugin=SplitText&source=trial"

Please sign in to comment.