javascript - Svelte:将 noscroll 类名从组件添加到正文-6ren

javascript - Svelte:将 noscroll 类名从组件添加到正文

转载作者：行者123 更新时间：2023-12-04 13:12:50

我有一个带有变量切换的 src/components/UI/Sidebar.svelte 组件。

export let toggle = true;

我想在 <body> 中添加一个名为“noscroll”的类名当切换为真时锁定正文滚动。我在 src/template.html 上添加了这个

<style>
    .noscroll { position: fixed; overflow-y:scroll };
</style>

当侧边栏打开时，实现这样的 y 轴滚动锁定的最佳方法是什么？

最佳答案

在您的 Sidebar.svelte 中，您添加一个切换类名的 react 函数

export let toggle;
$: document.body.classList[toggle ? 'add' : 'remove']('noscroll');

更新
感谢 Rich Harris 指出 toggle 需要第二个参数 specs这可以简化为

export let toggle;

$: if (process.browser) document.body.classList.toggle('noscroll', toggle);

编辑
当使用自提出此问题以来进入公共(public)测试版的 SvelteKit 时，您还可以使用 browser提供的变量。

export let toggle;
import { browser } from '$app/env'

$: if (browser) document.body.classList.toggle('noscroll', toggle);

关于javascript - Svelte:将 noscroll 类名从组件添加到正文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63259289/

javascript - Svelte:将 noscroll 类名从组件添加到正文
我有一个带有变量切换的 src/components/UI/Sidebar.svelte 组件。 export let toggle = true; 我想在中添加一个名为“noscroll”的类名
ios - UICollectionViewCell 中的动态高度 noScrollable UICollectionView
我想将动态高度 nonScrollable UICollectionView添加到UICollectionViewCell中。 (按照 Ash Furrow 的解释，在 UICollectionVie
javascript - 页面 noscroll 在粘性页脚布局中保持 scrollTop 位置
我受不了这样的脑残:当显示高大的弹出窗口时，隐藏页面滚动是一种常见的方法。但是当你设置 overflow: hidden 到 html 和 body 元素时，内容会自动返回到它的顶部 (scrollT

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章