CSS：-webkit-scrollbar禁用双按钮
在 CSS 中，你可以使用 ::-webkit-scrollbar 伪元素来自定义 WebKit 浏览器（如 Chrome 和 Safari）中的滚动条样式。要禁用滚动条上的双按钮（即滚动条两端的向上/向下或向左/向右按钮），你可以使用 ::-webkit-scrollbar-button 伪元素并将其样式设置为 display: none。
以下是一个示例，展示如何禁用滚动条上的双按钮：
/* 隐藏滚动条上的双按钮 */
::-webkit-scrollbar-button {
display: none;
}
/* 自定义滚动条的其他部分 */
::-webkit-scrollbar {
width: 12px; /* 滚动条的宽度 */
height: 12px; /* 滚动条的高度 */
}
::-webkit-scrollbar-thumb {
background-color: #888; /* 滚动条滑块的颜色 */
border-radius: 6px; /* 滚动条滑块的圆角 */
}
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 滚动条轨道的颜色 */
}解释
::-webkit-scrollbar-button：这个伪元素用于表示滚动条两端的按钮。将其display属性设置为none可以隐藏这些按钮。::-webkit-scrollbar：这个伪元素用于表示整个滚动条。你可以设置滚动条的宽度和高度。::-webkit-scrollbar-thumb：这个伪元素用于表示滚动条的滑块。你可以自定义滑块的颜色、圆角等样式。::-webkit-scrollbar-track：这个伪元素用于表示滚动条的轨道。你可以自定义轨道的颜色等样式。
示例
以下是一个完整的示例，展示如何在一个包含滚动内容的容器上应用这些样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar</title>
<style>
/* 隐藏滚动条上的双按钮 */
::-webkit-scrollbar-button {
display: none;
}
/* 自定义滚动条的其他部分 */
::-webkit-scrollbar {
width: 12px; /* 滚动条的宽度 */
height: 12px; /* 滚动条的高度 */
}
::-webkit-scrollbar-thumb {
background-color: #888; /* 滚动条滑块的颜色 */
border-radius: 6px; /* 滚动条滑块的圆角 */
}
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 滚动条轨道的颜色 */
}
/* 示例容器 */
.scroll-container {
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid #ccc;
}
.content {
height: 600px;
width: 600px;
background: linear-gradient(to bottom, #ffcc00, #ff6600);
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="content"></div>
</div>
</body>
</html>在这个示例中，.scroll-container 是一个包含滚动内容的容器。我们应用了自定义的滚动条样式，并隐藏了滚动条上的双按钮。你可以根据需要进一步自定义滚动条的样式。
相关·内容
当通过::-webkit-scrollbar选择器为CSS中的滚动条使用自定义样式时，根据目标元素的display属性，可以获得single-button或double-button。#333; padding: 10px;{}
</div> <&#
浏览 75提问于2020-06-16得票数 1
4回答
我不熟悉以双冒号为前缀的伪元素。我偶然看到一篇博客文章，讨论了使用一些webkit唯一的css设置滚动条的样式。伪元素CSS可以应用于单个元素吗？/* This works by applying style to all scroll bars in window */ width: 12px;div ::-we
浏览 3提问于2011-10-13得票数 87
回答已采纳
1回答
我似乎不能禁用iOS的CSS水平滚动。我需要额外的宽度在侧面，以腾出空间，我的肚脐，所以这是必要的，我禁用它。overflow-x: hidden; -ms-overflow-style: none;}
display: none; display: none;但是我仍然可以在我的iPhon
浏览 5提问于2022-12-04得票数 0
2回答
是否可以在运行时通过单击按钮来更改滚动条的css (例如，颜色)？这只需要在Google Chrome中工作，所以我使用： width:15px;::-webkit-scrollbar-thumb {#777;::-webkit-scrollbar-thumb:vertical {}我在其中添加了这个按钮：
<button id="changecss&
浏览 1提问于2013-03-13得票数 2
回答已采纳
2回答
content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no">
CSS
浏览 0提问于2017-07-05得票数 0
是否可以在站点上全局禁用css滚动条，但在特定元素上启用，例如自定义选择菜单？我也尝试过不同的！重要的选项 ::-webkit-scrollbar -webkit-appearance: none display: block !
浏览 1提问于2016-12-27得票数 0
如何在Electron中禁用固定宽度和高度的浏览器窗口中的水平滚动条？
谢谢。
浏览 72提问于2017-07-09得票数 8
就像这样- AddOutputFilterByType Substitute text/cssSubstitute s|::-webkit-scrollbar{width:16px}|'.button-group :first-child{display:none}::-webkit-scrollbar{width:16px}'|ni
</Locati
浏览 10提问于2022-08-27得票数 0
回答已采纳
1回答
我试过：
我认为这是一个Mac问题，因为许多Mac用户只使用他们的触控板就禁用了垂直滚动条我尝试了以下(从这个)：
.iframe
浏览 1提问于2015-09-07得票数 0
2回答
如何隐藏滚动条并保持内容可滚动？
、、、、
我想将我的html页面打印成PDF文件，但不希望滚动条显示在PDF文件中。我的页面有一个可滚动的正文，所以如果我这样设置： overflow: hidden;正文在最终的pdf文件中将是不完整的。那么，如果有一种方法可以阻止滚动条显示，但内容仍然可以滚动呢？
浏览 1提问于2017-02-16得票数 4
回答已采纳
当滚动条的拇指一直指向箭头时，普通的铬合金滚动条箭头按钮会处于禁用状态。我可以使用什么选择器来设置按钮的特定状态？
浏览 4提问于2017-09-29得票数 18
2回答
隐藏/显示铬扩展中的滚动条
、、、、
我通过从background.js文件中插入这个CSS来隐藏它： display: none !important;我试图通过从background.js文件中插入这个CSS来再次显示它： display: block !当我通过Chrome DevTools检查页面时，它会显示两个插入的CSS同时处于活动状态。
还有别的办法吗？需要注意的是，这应该适用于任何页面，因此我能够从任何插入CS
浏览 1提问于2017-10-06得票数 0
回答已采纳
1回答
用点替换滚动条
、、
不知道有没有人能帮上忙或者有没有可能。到目前为止，我还没有编写任何代码，但如果有人愿意帮助我，我将不胜感激。 我有一个模态。它有很多图标在里面，我已经设置了模式的宽度和高度。它给了我一个预期的滚动条。我想知道是否有可能删除滚动条，并将其替换为点。 我已经做了一些研究，所有我能找到的是它可以做，但只有在全网站网页上，我有一个模式。 ? 如果可以做到，而且没有人愿意提供帮助，我可以理解，因此我会带着我试图实现的东西回来。 提前谢谢。
浏览 17提问于2020-04-04得票数 0
5回答
我有一个自定义的滚动轮，我想做一个按钮来在该滚动轮的两个类之间切换，例如，假设我有这些CSS行来为滚动轮设置样式： width:webkit-scrollbar-thumb { outline: 1px solid slategrey;但是，当我单击该按钮时，我希望它更改为这个CSS：
body::-webkit-
浏览 5提问于2021-04-22得票数 0
回答已采纳
8回答
我目前正在使用webkit的::-webkit-scrollbar属性设置滚动条的样式，并希望在mousemove事件上更改这些属性。问题是我似乎找不到一种方法来动态地访问滚动条的CSS。
浏览 1提问于2011-03-03得票数 21
2回答
我只需要自定义使用CSS浏览器的滚动条的宽度，但需要其他的东西(如悬停效果，悬停颜色，滚动条轨道颜色，滚动条按钮颜色等，滚动条上的颜色点击等)。事实就是如此。 我该怎么做呢？我知道我们可以使用下面的css来改变滚动条的宽度： ::-webkit-scrollbar {}
浏览 44提问于2019-04-30得票数 2
根据https://css-tricks.com/custom-scrollbars-in-webkit/的说法，我应该可以使用:horizontal，但它没有任何效果。300px; height: 300px; overflow: auto; }html bo
浏览 15提问于2020-06-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
