当前位置: 首页 > 编程笔记 >

如何使用CSS创建自定义滚动条?

汪天宇
2023-03-14
本文向大家介绍如何使用CSS创建自定义滚动条?,包括了如何使用CSS创建自定义滚动条?的使用技巧和注意事项,需要的朋友参考一下

要使用CSS创建自定义滚动条,代码如下-

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      height: 200vh; /*to create a scrollbar*/
   }
   ::-webkit-scrollbar {
      width: 20px;
   }
   p {
      font-size: 40px;
   }
   ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey;
      border-radius: 10px;
   }
   ::-webkit-scrollbar-thumb {
      background: rgb(75, 22, 161);
      border-radius: 2px;
   }
   ::-webkit-scrollbar-thumb:hover {
      background: #9156ff;
   }
</style>
</head>
<body>
<h1>Custom Scrollbar Example</h1>
<h2>Will not work in IE,Edge and Firefox</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rerum. Placeat molestias 
quisquam doloremque, perferendis aspernatur quod cupiditate cumque porro cum facilis vel 
dolorem fuga dolore quae deserunt sint inventore distinctio et, modi sunt! Commodi omnis 
adipisci autem enim, perferendis, modi possimus quos, ducimus error hic natus voluptate. 
Error, rem!
</p>
</body>
</html

 类似资料:
  • 问题内容: 我想用CSS自定义滚动条。 我使用此WebKit CSS代码,该代码非常适合Safari和Chrome: 如何在Firefox中执行相同的操作? 我知道我可以使用jQuery轻松地做到这一点,但如果可行,我宁愿使用纯CSS做到这一点。 将不胜感激某人的专家意见! 问题答案: Firefox 64添加了对规范草案CSS滚动条模块级别1的支持,该模块添加了的两个新属性,并提供了一些如何显示

  • 问题内容: 我想知道如何在Facebook上制作自定义滚动条。 是只有CSS还是一些JavaScript? 如果可以,我可以对代码的外观有所了解吗? 此问题特定于Facebook滚动条样式,而不是如何简单地具有自定义滚动条 问题答案: 使用样式类似于滚动条的div来捕获单击和拖动事件。与这些事件相关的是滚动另一个div的内容的方法,该div设置为任意高度,并且通常具有css规则的overflow:

  • 我一直在为我的项目使用tkinter滚动条。但是,当我使用属性troughcolor时,滚动条的颜色不会改变。所以,我想为tkinter和python制作一个自定义滚动条,可以用来在框架中滚动。然后我将添加颜色到这个自定义滚动条。有没有办法这样做?下面是我的代码:

  • 问题内容: 如何通过CSS(级联样式表)为一个页面而不是整个页面自定义滚动条? 问题答案: 我认为整合有关滚动条,CSS和浏览器兼容性的最新信息会有所帮助。 滚动条CSS支持 当前,没有跨浏览器的滚动条CSS样式定义。最后,我在W3C文章中提到了以下内容,并于最近进行了更新(2014年10月10日): 某些浏览器(IE,Konqueror)支持非标准属性“ scrollbar-shadow-col

  • 问题内容: 我在网上看到了很酷的滚动效果… 滚动查看各部分时图像与下一张图像融合的位置。我一直在尝试重现它,但似乎无法弄清楚?如何 在网络上创建此效果? 我尝试在屏幕截图中使用,该部分的高于图像,但最后一个屏幕截图始终位于顶部。 有任何想法吗? 更新:由于各种原因(包括放置,使用倾斜…),我无法使用解决方案。我需要使用元素的解决方案。 问题答案: 可以使用和两个相似的图像来完成。backgroun

  • 我试图使用OpenNLPJavaAPI从文档中提取名称、技能等实体。但它没有提取正确的名称。我使用opennlp源锻造链接上可用的模型 下面是一段java代码- 我想做的是: 我正在使用ApacheTika将PDF文档转换为纯文本文档 但它正在提取姓名和其他单词。它不是提取专有名称。如何创建自定义模型,从文档中提取游泳、编程等技能? 给我一些想法! 任何帮助都将不胜感激!?