英文:
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 -->
<div class="scrolly">
The cat (Felis catus) is a domestic species of small carnivorous mammal. <br>
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. <br>
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. <br>
Domestic cats are valued by humans for companionship and their ability to kill small rodents. <br>
About 60 cat breeds are recognized by various cat registries. <br>
<br>
<br>
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. <br>
Its night vision and sense of smell are well developed. <br>
Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling, and grunting as well as cat-specific body language. <br>
Although the cat is a social species, it is a solitary hunter. <br>
As a predator, it is crepuscular, i.e. <br>
most active at dawn and dusk. <br>
It can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small mammals. <br>
It also secretes and perceives pheromones. <br>
<br>
from Wikipedia
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论