Nuxt2中如何隐藏全局滚动条仅保留描述区域滚动条？

要实现全局隐藏滚动条、仅特定区域显示的效果，你需要调整样式优先级并给目标容器添加高度限制，具体修改如下：

核心问题分析 #

当前代码存在两个关键问题：

• 全局滚动条隐藏规则（你未贴出但根据描述存在）覆盖了.scroller的滚动条样式
• .scroller容器没有高度限制，内容未超出容器范围时不会触发滚动条

修改后的代码 #

<template>
    <v-col md="6" sm="12" class="scroller">
          <v-row class="mx-auto" v-if="description.length > 0">
              <div class="description-content">
                 <span>
                        <!-- 描述内容区域 -->
                 </span>
              </div>
          </v-row>
    </v-col>
</template>

<style>
/* 全局隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}
/* Firefox全局滚动条隐藏 */
html {
    scrollbar-width: none;
}

/* 特定区域容器样式 */
.scroller {
    /* 设置最大高度，内容超出后触发滚动 */
    max-height: 400px;
    overflow-y: auto; /* 仅内容超出时显示滚动条 */
    display: block;
}

/* 仅针对.scroller区域的滚动条生效 */
.scroller::-webkit-scrollbar {
    display: block;
    width: 0.8rem;
}

.scroller::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scroller::-webkit-scrollbar-thumb {
    background: #888;
}

.scroller::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox下的特定区域滚动条设置 */
.scroller {
    scrollbar-color: #888 #f1f1f1;
    scrollbar-width: thin;
}
</style>

关键修改说明 #

• 全局滚动条隐藏：明确写出全局隐藏规则，确保所有页面默认隐藏滚动条
• 容器高度限制：给.scroller设置max-height（或固定height），让内容超出容器时触发滚动
• 样式优先级：使用.scroller::-webkit-scrollbar带类名的选择器，覆盖全局隐藏规则，仅让目标区域显示滚动条
• 跨浏览器兼容：同时添加webkit和Firefox的滚动条属性，适配不同内核浏览器

内容的提问来源于stack exchange，提问作者MonLes