CSS禁止滑动

CSS禁止滑动

在CSS中，可以通过以下方法禁止页面的滚动或滑动行为：

方法一：禁止整个页面的滚动

通过设置 body 或 html 的 overflow 属性为 hidden，可以禁止整个页面的滚动。

示例：

body {
    overflow: hidden; /* 禁止页面滚动 */
}

说明：

• overflow: hidden 会隐藏超出视口的内容，并禁止滚动。
• 适用于需要禁用整个页面滚动的场景（如弹出层显示时）。

方法二：禁止特定容器的滚动

如果只需要禁止某个容器的滚动，可以对该容器设置 overflow: hidden。

示例：

.container {
    overflow: hidden; /* 禁止容器滚动 */
}

HTML：

<div class="container">
    <p>这是一个禁止滚动的容器。</p>
</div>

说明：

• 仅对指定容器生效，不影响页面其他部分的滚动。

方法三：禁止横向或纵向滚动

可以通过 overflow-x 或 overflow-y 单独禁止横向或纵向滚动。

示例：

body {
    overflow-x: hidden; /* 禁止横向滚动 */
    overflow-y: hidden; /* 禁止纵向滚动 */
}

说明：

• overflow-x: hidden 禁止横向滚动。
• overflow-y: hidden 禁止纵向滚动。

方法四：使用 position: fixed

通过将 body 设置为 position: fixed，可以禁止页面滚动。

示例：

body.no-scroll {
    position: fixed;
    width: 100%;
}

JavaScript：

// 禁止滚动
document.body.classList.add('no-scroll');

// 恢复滚动
document.body.classList.remove('no-scroll');

说明：

• 这种方法会固定页面的位置，适合在弹出层显示时使用。
• 恢复滚动时需要移除 position: fixed。

方法五：使用 touch-action

在移动端，可以通过 touch-action 属性禁止触摸滚动。

示例：

body {
    touch-action: none; /* 禁止触摸滚动 */
}

说明：

• touch-action: none 会禁用所有触摸事件，包括滚动、缩放等。
• 适用于移动端场景。

方法六：使用 JavaScript 动态控制

通过 JavaScript 动态添加或移除样式，可以更灵活地控制滚动行为。

示例：

// 禁止滚动
function disableScroll() {
    document.body.style.overflow = 'hidden';
}

// 恢复滚动
function enableScroll() {
    document.body.style.overflow = '';
}

说明：

• 通过 JavaScript 动态修改 overflow 属性，可以灵活控制滚动行为。

方法七：使用 overscroll-behavior

overscroll-behavior 属性可以控制滚动到边界时的行为，避免页面整体滚动。

示例：

.container {
    overscroll-behavior: contain; /* 禁止滚动链 */
}

说明：

• overscroll-behavior: contain 可以防止滚动传播到父容器。
• 适用于嵌套滚动容器的场景。

总结

禁止滚动的常见方法包括：

1. overflow: hidden：禁止整个页面或特定容器的滚动。
2. position: fixed：固定页面位置，禁止滚动。
3. touch-action: none：禁止移动端触摸滚动。
4. JavaScript 动态控制：灵活控制滚动行为。
5. overscroll-behavior：防止滚动传播。

根据具体需求选择合适的方式即可！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github