【前端】js 动态修改滚动条样式_自定义滚动条样式js

相关文章推荐

气势凌人的莴苣 · vue3 使用element plus ...· 3 周前 ·

失落的啄木鸟 · 前端 - ...· 1 年前 ·

气宇轩昂的红金鱼 · 使用DataGrip连接SQL ...· 1 年前 ·

豁达的小马驹 · PyQt5-UI界面控件布局实战-界面水平， ...· 1 年前 ·

酒量大的莲藕 · TS 对象可能为“未定义”，不能将类型“ ...· 1 年前 ·

let div = document.createElement("div"); let _scrollNode = document.querySelector("[css-id='scroll']") || null; if (_scrollNode) { document.querySelector("head").removeChild(document.querySelector("[css-id='scroll']")); div.innerHTML = scrollStyle; let newScrollNode = div.querySelector("[css-id='scroll']"); document.getElementsByTagName("head")[0].appendChild(newScrollNode) scroll('#e5e7eb')

横轴的滚动条

::-webkit-scrollbar

//js 动态修改滚动条样式  透明背景  参数 滚动条颜色
 function scroll(color) {
  let scrollStyle = `
      <style css-id="scroll">
        /* 滚动条 */
        /*定义整个滚动条高宽及背景：高宽分别对应横竖滚动条的尺寸 滚动条宽度 滚动条轨道背景颜色*/
        ::-webkit-scrollbar
            width:20px;
            background-color:#F5F5F54a;
        /*定义滚动条轨道：内阴影+圆角 + 轨道背景颜色*/
        ::-webkit-scrollbar-track
           /* background-color:#f5f5f5;*/
        /*定义滑块：内阴影+圆角*/
        ::-webkit-scrollbar-thumb
            border-radius:10px;
            background-color:${color};
      </style>
  let div = document.createElement("div");
  let _scrollNode = document.querySelector("[css-id='scroll']") || null;
  if (_scrollNode) {
    document.querySelector("head").removeChild(document.querySelector("[css-id='scroll']"));
  div.innerHTML = scrollStyle;
  let newScrollNode = div.querySelector("[css-id='scroll']");
  document.getElementsByTagName("head")[0].appendChild(newScrollNode)
scroll('#ffffff')

::-webkit-scrollbar-thumb:vertical { background: rgba(0,0,0,0.61); -webkit-border-radius: 80px; /* 鼠标滑过的滚动条样式 */ ::-webkit-scrollbar-thumb:vertical:hover { background: rgba(0,0,0,0.61); -webkit-border-radius: 80px; /* 鼠标点击滚动条之后的样式 */ ::-webkit-scrollbar-thumb:vertical:active { background: rgba(0,0,0,0.61); -webkit-border-radius: 80px;

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的 滚动条 样式，这方面的 jQuery 插件比较不错的，有两个： jS crollPane和mCustomScrollbar。关于 jS crollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。所以我选择了后者：mCustomScrollbar。下图是两者官方示...

CSS设置 滚动条 样式因为在现在的大部分项目中很多都用到了 滚动条 ，有时候用到模拟的 滚动条 ，现在说下 滚动条 的CSS也能解决。比如网易邮箱的 滚动条 样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。一：webkit的CSS设置 滚动条 1.1 主要有下面7个属性::-webkit-scrollbar 滚动条 整体部分，可以设置宽度啥的 ::-webkit-scrollbar-butto

前端可以通过CSS来更改下拉 滚动条 的样式。根据引用[1]和引用[2]的内容，可以看出在一些框架中已经对 滚动条 的样式进行了美化，所以你可能不需要自己修改 滚动条 的样式。如果你想 自定义 滚动条 的样式，可以使用CSS的伪元素选择器和 滚动条 相关的属性来实现。根据引用[2]和引用[3]的内容，你可以使用以下CSS代码来更改 滚动条 的样式： ```css /* Webkit浏览器（Chrome、Safari） 滚动条 样式 */ ::-webkit-scrollbar { width: 10px; /* 设置 滚动条 宽度 */ ::-webkit-scrollbar-thumb { background-color: #fcfcfc; /* 设置 滚动条 滑块的颜色 */ ::-webkit-scrollbar-track { background-color: #1589ce; /* 设置 滚动条 背景色 */ /* Firefox浏览器 滚动条 样式 */ /* Firefox不支持修改 滚动条 的颜色，只能修改 滚动条 的宽度和背景色 */ /* 可以使用伪元素选择器来修改 滚动条 的样式 */ /* 例如： */ div::-moz-scrollbar { width: 10px; /* 设置 滚动条 宽度 */ div::-moz-scrollbar-thumb { background-color: #fcfcfc; /* 设置 滚动条 滑块的颜色 */ div::-moz-scrollbar-track { background-color: #1589ce; /* 设置 滚动条 背景色 */ 请注意，不同浏览器对 滚动条 的样式支持程度不同，所以以上代码可能在不同浏览器中表现不一致。建议在实际使用中进行测试和调整。

【异常】JDK21报错NoSuchFieldError: Class com.sun.tools.javac.tree.JCTree$JCImport does not have member fie 17262 【异常】JDK21报错NoSuchFieldError: Class com.sun.tools.javac.tree.JCTree$JCImport does not have member fie wuhunyu: [code=plain] jdk：21.0.1 springboot：3.1.2 [/code] 3.1.2 版本的 springboot 官方适配的 lombok 版本是 1.18.28，结果报了博主标题的错误，lombok 版本换成 1.18.30 之后有效【前端】JS实现SQL格式化善良恶霸: 可以了，忘记指定language 类型了

【前端】JS实现SQL格式化我是Superman丶: 用的第三方插件, 你可以找一下文档, 或者折中一下 1. 表名生成之后 2. 将生成的sql 重新格式化每次动态表名改变之后都重新调用一下方法格式化一下思路仅供参考