自定义细轨道上的圆形滑块滚动条

huangapple go评论73阅读模式
英文:

Custom scrollbar with circular thumb on a thin track

问题

晚上好大家。
我需要实现一个像图片中显示的滚动条一样的滚动条。

自定义细轨道上的圆形滑块滚动条

我没有找到任何可以实现这个效果的CSS或JS脚本。有人遇到过同样的请求吗?

谢谢

编辑:经过长时间的搜索,我找到了这个解决方案。它看起来不错,可以进行一些CSS调整。https://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

英文:

Good evening everybody.
I need to realize a scrollbar like the one shown in the picture.

自定义细轨道上的圆形滑块滚动条

I did not find any CSS or JS script to make that happens. Anybody faced this same request?

Thanks

EDIT: After a long search, I found this solution. It looks fine, with some CSS adjustments. https://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

答案1

得分: 0

无法找到纯CSS示例的原因是滑块的大小通常与滚动条的总宽度一样大。使用纯CSS,您可以尝试隐藏背景,只保留滑块,但这会消除黑色条(如图片所示)。您可以查看此项目:https://stackoverflow.com/questions/39571102/custom-scroll-bar-on-a-div-element-in-angular-2-0-cli-project

英文:

The reason you cannot find such pure css examples is that the thumb size is usually just as large as the overall width of the scollbar. With pure css you can try to hide the background and leave only the thumb, but this would eliminate the black bar(shown on the picture). You may take a look at this project: https://stackoverflow.com/questions/39571102/custom-scroll-bar-on-a-div-element-in-angular-2-0-cli-project

答案2

得分: 0

不要在尝试渐变之前说CSS中不可能的事情。

.scrolly{
  height: 100vh;
  line-height: 30px;
  overflow-y: scroll;
}

.scrolly::-webkit-scrollbar-thumb {
    background: radial-gradient(circle farthest-corner, yellow 0%, yellow 50%, transparent 50%, transparent 100%) no-repeat;
    background-size: auto 30px;
    background-position: center;
}

.scrolly::-webkit-scrollbar {
  width: 30px;
}

.scrolly::-webkit-scrollbar-track {
  background: linear-gradient(to right, transparent 0, transparent 45%, #222 45%, #222 55%, transparent 55%, transparent 100%);
}
<div class="scrolly">
    猫(Felis catus)是一种小型食肉哺乳动物的家养物种。<br>
    它是家猫科中唯一的家养物种,通常被称为家猫以区别于家族中的野生成员。<br>
    猫通常被人类养作宠物,但也可以是农场猫或野猫;野猫自由活动并避免与人类接触。<br>
    家猫因其陪伴和捕杀小型啮齿动物的能力而受到人类的重视。<br>
    各种猫注册机构承认约60种猫品种。<br>
    <br>
    <br>
    猫在解剖学上与其他猫科物种相似:它具有强健的灵活身体、快速的反射、锋利的牙齿和可伸缩的爪子,适应了捕杀小型猎物如老鼠。<br>
    它的夜视和嗅觉发达。<br>
    猫的交流方式包括嗥叫、咕噜声、发出颤音、嘶嘶声、咆哮声和咕噜声,以及猫特有的身体语言。<br>
    尽管猫是社交性物种,但它是一种独自捕猎者。<br>
    作为捕食者,它在黄昏和黎明时最活跃。<br>
    它可以听到对人类听觉来说太微弱或太高频的声音,比如老鼠和其他小型哺乳动物发出的声音。<br>
    它还分泌和感知信息素。<br>
    <br>
    来自维基百科
</div>
英文:

don't say something is not possible in CSS before you try gradients

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// pure css, no js ;)

<!-- language: lang-css -->

.scrolly{
  height: 100vh;
  line-height: 30px;
  overflow-y: scroll;

}

.scrolly::-webkit-scrollbar-thumb {
    background: radial-gradient(circle farthest-corner, yellow 0%, yellow 50%, transparent 50%, transparent 100%) no-repeat;
    background-size: auto 30px;
    background-position: center;
}

.scrolly::-webkit-scrollbar {
  width: 30px;
}

.scrolly::-webkit-scrollbar-track {
  background: linear-gradient(to right, transparent 0, transparent 45%, #222 45%, #222 55%, transparent 55%, transparent 100%);
}

<!-- language: lang-html -->

&lt;div class=&quot;scrolly&quot;&gt;
      The cat (Felis catus) is a domestic species of small carnivorous mammal. &lt;br&gt;
    It is the only domesticated species in the family Felidae and is commonly referred to as the domestic cat or house cat to distinguish it from the wild members of the family. &lt;br&gt;
    Cats are commonly kept as house pets but can also be farm cats or feral cats; the feral cat ranges freely and avoids human contact. &lt;br&gt;
    Domestic cats are valued by humans for companionship and their ability to kill small rodents. &lt;br&gt;
    About 60 cat breeds are recognized by various cat registries. &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth, and retractable claws adapted to killing small prey like mice and rats. &lt;br&gt;
    Its night vision and sense of smell are well developed. &lt;br&gt;
    Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling, and grunting as well as cat-specific body language. &lt;br&gt;
    Although the cat is a social species, it is a solitary hunter. &lt;br&gt;
    As a predator, it is crepuscular, i.e. &lt;br&gt;
    most active at dawn and dusk. &lt;br&gt;
    It can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small mammals. &lt;br&gt;
    It also secretes and perceives pheromones. &lt;br&gt;
    &lt;br&gt;
  from Wikipedia
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月31日 23:09:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76374958.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定