喂饭命令:写一个“油猴脚本”浏览器滚动条美化
deepseek写完后有说明、使用方法、注意事项
复制脚本到油猴管理面板新建用户脚本
保存后的脚本,在已安装的脚本中查看。
浏览器滚动条美化脚本未打开效果图
浏览器滚动条美化脚本打开效果图
脚本代码
// ==UserScript==
// @name 动态美化滚动条
// @namespace http://tampermonkey.net/
// @version 1.1
// @description 通过右键菜单动态调整滚动条大小(大、中、小)
// @author 科技鸢
// @match *://*/*
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
// 定义滚动条样式
const scrollbarStyles = {
large: `
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
`,
medium: `
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
`,
small: `
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
`,
};
// 默认样式
let currentStyle = scrollbarStyles.small;
// 添加样式到页面
function applyScrollbarStyle(style) {
const styleId = 'custom-scrollbar-style';
let styleElement = document.getElementById(styleId);
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.id = styleId;
document.head.appendChild(styleElement);
}
styleElement.textContent = style;
}
// 初始化应用默认样式
applyScrollbarStyle(currentStyle);
// 注册右键菜单选项
GM_registerMenuCommand('滚动条大小: 大', () => {
currentStyle = scrollbarStyles.large;
applyScrollbarStyle(currentStyle);
});
GM_registerMenuCommand('滚动条大小: 中', () => {
currentStyle = scrollbarStyles.medium;
applyScrollbarStyle(currentStyle);
});
GM_registerMenuCommand('滚动条大小: 小', () => {
currentStyle = scrollbarStyles.small;
applyScrollbarStyle(currentStyle);
});
})();
只要你有想法,可以做出天马行空的创意脚本,今天的分享到这里结束了,感谢大家能够看到这里,如本文章对你有用,请点赞、评价、转发和发表您的观点!