如何在Opera浏览器中使用CSS隐藏滚动条？优化网页设计的实用指南

::-webkit-scrollbar

scrollbar-width

-ms-overflow-style

::-webkit-scrollbar

::-webkit-scrollbar

body

/* 针对Webkit浏览器（Chrome, Safari, Opera, Edge等） */
.hide-scrollbar-container::-webkit-scrollbar {
    display: none; /* 完全隐藏滚动条 */
    width: 0;      /* 确保宽度为0，避免占据空间 */
    height: 0;     /* 确保高度为0 */
}

/* 针对Firefox浏览器 */
.hide-scrollbar-container {
    scrollbar-width: none; /* 隐藏滚动条 */
}

/* 针对旧版IE/Edge浏览器 */
.hide-scrollbar-container {
    -ms-overflow-style: none; /* 隐藏滚动条 */
}

/* 示例：一个实际应用的容器 */
.my-scrollable-content {
    overflow: auto; /* 确保内容溢出时可以滚动 */
    height: 300px;  /* 设定一个高度，使其内容溢出 */
    border: 1px solid #eee;
    padding: 15px;
    /* 应用隐藏滚动条的样式 */
    -webkit-overflow-scrolling: touch; /* 提升移动端滚动体验 */
}

/* 将上述隐藏滚动条的规则应用到 .my-scrollable-content */
.my-scrollable-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.my-scrollable-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

my-scrollable-content

<div class="my-scrollable-content">
    <p>这里是很多内容，足以导致滚动条出现。</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>更多内容...</p>
</div>

::-webkit-scrollbar

/* 针对Webkit浏览器自定义滚动条 */
.custom-scrollbar-container::-webkit-scrollbar {
    width: 10px;  /* 滚动条的宽度 */
    height: 10px; /* 水平滚动条的高度 */
    background-color: #f0f0f0; /* 滚动条的背景色，通常是轨道区域 */
    border-radius: 5px; /* 滚动条整体的圆角 */
}

/* 滚动条轨道 */
.custom-scrollbar-container::-webkit-scrollbar-track {
    background-color: #f8f8f8; /* 轨道的背景色 */
    border-radius: 5px; /* 轨道的圆角 */
    border: 1px solid #e0e0e0; /* 轨道的边框 */
}

/* 滚动条滑块（拖动部分） */
.custom-scrollbar-container::-webkit-scrollbar-thumb {
    background-color: #888; /* 滑块的背景色 */
    border-radius: 5px; /* 滑块的圆角 */
    border: 2px solid #f8f8f8; /* 滑块的边框，通常与轨道背景色一致，制造浮动感 */
}

/* 鼠标悬停在滑块上时的样式 */
.custom-scrollbar-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 悬停时滑块的颜色 */
}

/* 针对Firefox浏览器（支持有限，但更标准化） */
.custom-scrollbar-container {
    scrollbar-width: thin; /* 可以是 auto | thin | none */
    scrollbar-color: #888 #f8f8f8; /* 滑块颜色 轨道颜色 */
}

/* 示例：一个实际应用的容器 */
.my-custom-scrollable-content {
    overflow: auto;
    height: 300px;
    border: 1px solid #ccc;
    padding: 15px;
}
/* 将上述自定义滚动条的规则应用到 .my-custom-scrollable-content */
.my-custom-scrollable-content::-webkit-scrollbar {
    width: 12px;
    background-color: #f5f5f5;
}
.my-custom-scrollable-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
.my-custom-scrollable-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
.my-custom-scrollable-content::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}
.my-custom-scrollable-content {
    scrollbar-width: thin;
    scrollbar-color: #555 #F5F5F5;
}

scrollbar-width

scrollbar-color

body

overflow: hidden;