用纯js修改chrome浏览器滚动条样式

2026-09-02

纯JS自定义网页滚动条

前言由于最近在公司很忙,没什么时间更新,忙中抽时间做了一个JS滚动条,因为火狐浏览器与谷歌浏览器的滚动条自定义样式过于麻烦,所以我打算自己写个方便改样式的滚动条 CSS <style> #CheShi { background: #ccc; width: 80%; height: 200px; overflow: hidden; position: relative; /* 禁止选择文字 */ moz-user-select: -moz-none; -moz-user-select: non

关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

资料: http://manos.malihu.gr/jquery-custom-content-scroller/ (此项是结合Jquery使用的,在此并未采用) https://www.npmjs.com/package/ngx-perfect-scrollbar https://www.cnblogs.com/liulei-cherry/p/10044159.html#4454915 曾多少次遇到想修改各个浏览器的滚动条样式,因为实在是看着不爽,今天终于实现了这个骚操作↓ 在没有遇到ng

自设chrome默认滚动条样式

今天无聊,想着chrome这种全面使用html的浏览器,可不可以让我自行改变它的默认CSS呢,结果去查查,有,很好 win7/8目录为 C:\Users\[你的用户名]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets 在这个目录下找到Custom.css打开修改即可立马套上了之前做的一个滚动条样式,代码如下: ::-webkit-scrollbar { width: 8px; height: 8px; } ::-we

Win7中修改Chrome浏览器缓存文件目录

方法有两种: 第一种: 在Windows 7下可以用mklink命令把Chrome浏览器的缓存位置设置为自己需要的文件夹路径. Chrome浏览器默认的缓存文件位于: CC:\Users\登录用户名\AppData\Local\Google\Chrome\User Data\Default\Cache 假如你想指定的存放缓存文件位置在: D:\Chrome\Cache 那么,你可以先删除Chrome默认的缓存文件夹,然后在"开始→搜索框"键入"cmd",右击cmd程

Chrome浏览器video样式控制-隐藏下载按钮

Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式一.如何隐藏video的下载按钮 1. 在Chrome58以上的版本中使用 video元素的 controlsList API :https://googlechrome.github.io/samples/media/controlslist.html 代码如下: <video controls controlsL

修改 Chrome浏览器主页被劫持 chrome 主页被篡改成hao.qquu8.com的解决方案

1. 开始菜单输入‘g'找到 Google Chrome浏览器 2. 修改属性->目标,将 chrome.exe hao.qquu8.com 后面的网址去掉,如图:

js修改文档的样式

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript修改DOM节点CSS样式</title><script type="text/javascript"> function modifyDOMCSS(){ document.getElementById("red").style.col

修改chrome浏览器默认css样式的方法

最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的解决方法不是特别好:比如删除这个难看的字体(字体虽然难看,有时仍然需要):修改字体配置文件中字体的优先级或重映射一些字体(问题只发生在chrome上,修改之后却不止影响到chrome). 然后就想要找找有没有更好的办法,一开始发现了可以修改-/.config/google-chrome/Defaul

怎么修改chrome浏览器的字体

点击“自定义字体”可以修改字体风格. 如果习惯看微软雅黑的字体,我们可以点击“宋体”进入字体选择,拖动向下可以找到“微软雅黑”的字体,点击“微软雅黑”,然后再点击“完成”即可. 另外如果设置字体后想要改回默认字体,则可以在“自定义字体”里将字体选项改为标准字体:宋体 Serif字体: Simsun 21px Sans-Serif字体: Simsun 21px 等宽字体:NSimsun 21px 默认编码:中文简体(GBK) 默认语言:中文简体. https://www.zhihu.co

纯JS判断各种浏览器类型及版本.

IE11或者非IE if (!document.all) { alert('IE11+ or not IE'); } IE10 if (document.all && document.addEventListener && window.atob) { alert('IE10'); } IE9 if (document.all && document.addEventListener && !window.atob) { alert('IE

bootshrap会改变IE浏览器滚动条样式

在某个小网站的开发中客户一直抱怨在IE11中网页右边滚动条不一样后来发现在IE11中,有2个页面滚动条会自动隐藏,一开始以为是浏览器默认行为,改了overflow:scroll后也没有用.仔细观察后发现这2个页面因为用了bootshrap的特效而引用了bootshrap.css文件,于是确定是bootshrap.css中的问题. 排查后发现是以下代码导致的. @-ms-viewport { width: device-width; } 在此mark一下,也为出现问题的朋友提供下帮助.

QT修改默认的滚动条样式

这几天写一个类似于悬浮窗的小程序,可是qt自带的滚动条实在难看,经过多番查找终于找到一个类似于qq聊天窗口的滚动条,废话不说上代码.希望能帮到大家 1.写入到文件中,新建个xx.qss,然后复制一下内容: // 设置垂直滚动条基本样式 QScrollBar:vertical { width:8px; background:rgba(0,0,0,0%); margin:0px,0px,0px,0px; padding-top:9px; // 留出9px给上面和下面的箭头 padding-botto

CSS3自定义浏览器滚动条样式

一个完整滚动条右以下部分组成: ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border: ::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度.背景色.背景图片: ::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的部分: ::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分: ::-webkit-scrol

自定义webkit浏览器滚动条样式

::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background-color: transparent; } /* 滚动条的滑轨背景颜色 */ ::-webkit-scrollbar-thumb { background-color: #666; padding:0px 2px; border-radius: 5px; } /* 滑块颜色 */ ::-webkit-scrollbar-b

chrome浏览器默认样式覆盖input背景

问题描述:input表单添加了背景图片,结果自动填充是,编程了一个淡黄色矩形方框. 解决方案:网上查询了很多的解决方式,基本都不管用,这里我简单说两个. 1.去除黄色背景 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } outline:none; //去除焦点边框 2.修改readonly属性: <input type="password" read

js修改伪类元素样式

CSS设置浏览器滚动条样式

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5

JS修改当前控件样式&为控件追加事件

先搁这吧,今天太晚了,以后再加注释和修整吧.不幸搜到的朋友就别看了 <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.or

浏览器指纹--纯js拿到浏览器指纹

序言: 前两天有接收到一下问题,如何拿到浏览器指纹中的位置信息和CPU,在这之前完全没有接触过浏览器指纹,抱着学习和好奇的心态,就去网上查了大量的资料.下面我将学习过程和成果贴出来给大家. 步骤 1.什么是浏览器指纹? 一般情况下,网站或者广告商都想要一种技术可以在网络上精确的定位到每一个个体,这样就可以通过收集这些个体的数据,然后加以分析之后更加精确的去推送广告和其他的一些活动.Cookie技术是非常受欢迎的一种.当用户访问一个网站时,网站可以在用户当前的浏览器Cookie中永久植入一个含有唯

Chrome 浏览器默认样式覆盖自己 CSS 样式的解决

检查 HTML 源代码,DOCTYPE 的声明是否写正确. HTML5 的 DOCTYPE 声明规范: <!DOCTYPE html> 参考链接: css - User agent stylesheet overriding my table style? Twitter Bootstrap - Stack Overflow DOCTYPE的作用:文档类型与浏览器模式 | Harttle Land

如何通过 js 修改微信浏览器的title?

用纯js修改chrome浏览器滚动条样式

热门专题