程序员经验分享-hwhale

CSS滚动拇指固定圆圈大小

2023-12-01

我想将滚动条拇指设置为固定圆圈，但我缺少一些东西，因为我无法修复高度大小。现在发生的事情是，根据滚动条的长度，拇指的长度，无论滚动条有多长，我都想得到一个固定的圆圈。 这是我所拥有的：

.container {
  display: flex;
  flex-direction: row;
}
.list1 {
  overflow-y: scroll;
  height: 100px;
  width: 100px;
  margin: 50px;
}

.list1::-webkit-scrollbar-track
{
	border-radius: 10px;
  border: 1px solid blue;
  width: 50px;
}

.list1::-webkit-scrollbar
{
	width: 50px;
	background-color: blue;
  border-radius: 10px;
}

.list1::-webkit-scrollbar-thumb
{
	border-radius: 100px;
	background-color: red;
  border: 5px solid blue;
}
<div class="container">
  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>

  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

如您所见，滚动条拇指的高度取决于我拥有的项目数量。下面是我希望它看起来像的样子：

enter image description here


您只需要在其中设置一个高度值.list1::-webkit-scrollbar-thumb:

.list1::-webkit-scrollbar-thumb {
  height:50px;
}


.container {
  display: flex;
  flex-direction: row;
}
.list1 {
  overflow-y: scroll;
  height: 100px;
  width: 100px;
  margin: 50px;
}
.list1::-webkit-scrollbar-track {
  border-radius: 10px;
  border: 1px solid blue;
  width: 50px;
}
.list1::-webkit-scrollbar {
  width: 50px;
  background-color: blue;
  border-radius: 10px;
}
.list1::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-color: red;
  border: 5px solid blue;height:50px;
}
<div class="container">
  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>

  <ul class="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

scrollbar

CSS滚动拇指固定圆圈大小 的相关文章

  • jQuery 相当于 YUI StyleSheet Utility？

    jQuery 或其插件之一 是否具有与YUI 样式表实用程序 http developer yahoo com yui 3 stylesheet StyleSheet Utility 能够从头开始创建新的样式表 以及修改作为来自同一域的元素

  • 将滚动条隐藏在 Delphi dbgrid 中（即使在调整大小时）

    对于我们的 dbgrid 我们希望滚动条始终隐藏 由于 TDBGrid 没有 滚动条 属性 我们使用 ShowScrollBar DBGrid1 Handle SB VERT False ShowScrollBar DBGrid1 Hand

  • CSS 向后/反向过渡

    我想知道是否有任何方法可以使用相同的 CSS 过渡实例来向前移动然后向后 反向移动 例如 假设我有这样的转变 webkit keyframes fade transition from opacity 0 to opacity 1 以及这次

  • 如何正确编写 CSS 属性选择器来提取所有 id 属性？

    情况 我目前正在尝试在 VBA 中使用语法重现属性选择器 attr 来自给出的 CSS 选择器练习here https www w3schools com cssref trysel asp 选择器旨在根据给定属性的值选择元素 预期结果 在

  • 使用 javascript 加载不同的 CSS 样式表

    我需要使用 javascript 根据正在传递的 URL 变量加载不同的样式表 场景是这样的 我们需要使用一个 CSS 样式表和一个不同的样式表来维护一个移动网站 当通过 iOS 应用程序中加载的 Web 视图访问该页面时 该样式表将用于设

  • 带有 selectInputs 的 DT 数据表在选择后重置回左侧

    我在 Shiny 应用程序的 DT 数据表的列中使用 selectInputs 感谢一些帮助here https stackoverflow com questions 74620665 vertically center selectin

  • 在画布中心写入 (0,0)-HTML5

    I m currently developing a drawing app which allows the user to click and drag to determine the size of the shape and al

  • 更改输入上的父 div [type=checkbox]：使用 css 检查[重复]

    这个问题在这里已经有答案了 我可以弄清楚如何在选中复选框时更改父 div 更改以下段落效果很好 在 Chrome 中尝试过这种方法但没有运气 HTML div div

  • 使用 CSS 在浏览器中滚动时更改标题的大小和内容

    知道如何制作这里看到的东西吗http studiompls com case studies crown maple http studiompls com case studies crown maple 标题变小 徽标更改为不同的按钮

  • CSS @import 及其顺序

    是否可以使用 importone像这样的 css 文件 import file1 some css here import file2 chrome 无法识别上述第二个导入 但这可以工作 import file1 import file2

  • 样式表与 标记上的 TITLE 属性中断？ [复制]

    这个问题在这里已经有答案了 我正在帮助升级一个非常旧的公司内部网 我们的用户使用的是 IE8 和 IE9 我们的大多数网站都是为 IE5 IE9 编写的 我们即将将所有人升级到 IE11 但试点人员发现了大量兼容性问题 未来几个月将会有大量

  • 如何获取当前页面样式表作为字符串？

    假设我当前的页面如下所示 我想

  • 向剪切框添加阴影

    我可以使用 CSS 制作以下盒子及其切口三角形 带有边框技巧 只是没有背景图案并带有轻微的噪音 可以用背景图案制作切口三角形吗 还被阴影困住了 我怎样才能添加它 我是否应该更好地切换回旧方法 在框周围使用跨度和背景图像 编辑 具有一张背景图

  • 重复背景图像被切断

    我有一个容器 DIV 它随着内容的高度而缩放 它有一个背景图像 可以重复向下形成图案 问题是重复的背景图像在 div 底部被切断 有没有办法让背景图像不被切断 这是代码 http jsfiddle net WkEKD 7 http jsfi

  • 网页CSS覆盖ckeditor 3样式

    我有一个加载 screen css 的页面 其中包含evil规则 由于各种原因我无法删除或修改 a background red important I use CK编辑器3 x http ckeditor com 在同一页面上 问题是 无

  • 为什么我的 css 在 IE9 中无法正确显示？

    几个小时前 我对我的 WordPress 主页做了一个小改动 现在 IE9 中出现了一些以前不存在的随机奇怪 CSS 问题 我曾使用 IE 的开发工具来尝试找出问题所在 但该工具与 firebug 相比实在是太糟糕了 而且问题只出现在 IE

  • Twitter Bootstrap：按钮下拉列表中的图标

    Here http jsfiddle net DjHyQ 是 jsfiddle 上的链接 其中包含一些演示 它在 Chrome 甚至 IE 中运行良好 但在 FF 中图标会下降 我怎样才能解决这个问题而不用负边距或类似的东西来提升它们 我不

  • 右侧对齐不浮动

    我有一个聊天小部件 我正在向其中添加一些样式 但是 我很难使 用户 聊天气泡与屏幕右侧对齐 当我使用向右浮动和向左浮动 另一侧 时 div 不再正确定位 因为它们似乎只是转到相对 div 的右侧 我希望它也能够附加 div 这将导致溢出 y

  • 删除 twitter bootstrap 中的行

    我正在使用 twitter bootstrap 来执行一些我被迫执行的网络应用程序 我不是网络开发人员 但我找不到一种方法来禁用表的行线 正如你可以看到引导文档 http getbootstrap com components panels

  • 如何水平和垂直对齐内联块

    什么是最好 最干净的使用CSS对齐 dates div位于标题的右侧 垂直于中间 I tried float right 但这不允许vertical align 我想避免使用浮动 所以我使用inline block 并使用相对定位 有没有更

随机推荐

热门标签