diff --git a/README.md b/README.md index 206552bf..f0843838 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ function raf(time) { requestAnimationFrame(raf) ``` -Add the following CSS to your project: +#### Recommended CSS: ```css html.lenis, html.lenis body { @@ -94,6 +94,18 @@ html.lenis, html.lenis body { } ``` +or link the CSS file: + +```html + +``` + +or import it: + +```js +import 'lenis/dist/lenis.css' +``` + ### GSAP ScrollTrigger: ```js const lenis = new Lenis() diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 00000000..bf471033 --- /dev/null +++ b/dist/style.css @@ -0,0 +1,20 @@ +html.lenis, +html.lenis body { + height: auto; +} + +.lenis.lenis-smooth { + scroll-behavior: auto !important; +} + +.lenis.lenis-smooth [data-lenis-prevent] { + overscroll-behavior: contain; +} + +.lenis.lenis-stopped { + overflow: hidden; +} + +.lenis.lenis-smooth iframe { + pointer-events: none; +} diff --git a/packages/core/package.json b/packages/core/package.json index 4e0e0d97..e6df0f50 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -2,7 +2,7 @@ "name": "lenis", "scripts": { "build": "rollup --bundleConfigAsCjs -c", - "postbuild": "shx rm -rf ./dist/types/ && shx cp -r ./dist/* ../../dist", + "postbuild": "shx rm -rf ./dist/types/ && shx cp -r ./src/style.css ./dist && shx cp -r ./dist/* ../../dist", "dev": "npm-run-all --parallel watch playground", "watch": "rollup --bundleConfigAsCjs -c -w", "playground": "npm run dev --prefix ./playground" diff --git a/packages/core/src/style.css b/packages/core/src/style.css new file mode 100644 index 00000000..bf471033 --- /dev/null +++ b/packages/core/src/style.css @@ -0,0 +1,20 @@ +html.lenis, +html.lenis body { + height: auto; +} + +.lenis.lenis-smooth { + scroll-behavior: auto !important; +} + +.lenis.lenis-smooth [data-lenis-prevent] { + overscroll-behavior: contain; +} + +.lenis.lenis-stopped { + overflow: hidden; +} + +.lenis.lenis-smooth iframe { + pointer-events: none; +}