前言

好吧好吧,大大真勤快,我文章还没发出来2天捏大大就搞定了这个问题,不愧是大大🤣

旧的前言

众所周知,Stellar是一款十分精美的主题,我一看就喜欢上了啊,主题很漂亮,佬更新的也很勤快,然后就嘿嘿嘿...咳咳,跑题了跑题了,有一点小问题就是timeline动态数据会有一个滚动框🥹

跟大佬反馈之后大佬说是浏览器兼容的问题,我换到手机上一看,确实消失了

但是每每在电脑上访问自己网站的时候,看到那个框框,就一下子吸引我的注意力,那好吧,想办法干掉它

局限

因为css文件是-webkit-开头的,只针对webkit内核浏览器有效,所以救不了firefox

Chrome Edge Firefox Opera Safari
x

等等等,firefox真的没救了么?条条大路通罗马,用不了css我还不能用js了?

办法在这里捏

方法

本着不改动主题源文件的原则,因为这样之后更新就有点麻烦,所以我决定,曲线救国,通过引用滚动条css文件来替换掉默认的滚动条

新建 scrollbar.css

其实只需要小小的一行代码

blog/source/css/scrollbar.css
/* 外层轨道 */
::-webkit-scrollbar-track {
background-color: rgba(200,155,155,0); //这里最后一位数是不透明度
}

好了,这就完了

引入css文件

在博客的根目录下的_config.yml文件中写入

blog/_config.yml
inject:
head:
- <link rel="stylesheet" href="/css/scrollbar.css">

然后hexo cl hexo g hexo s就可以预览啦

更多

什么?你说去掉了滚动框默认的还是丑?那你咋不早说

还是css文件中,我们加一点点东西

blog/source/css/scrollbar.css
/* 滚动条整体部分 */
::-webkit-scrollbar {
width: 10px;
height: 8px;
}

/* 外层轨道 */
::-webkit-scrollbar-track {
background-color: rgba(200,155,155,0);
border-radius: 2em;
}

/* 滚动条可以拖动的那部分 */
::-webkit-scrollbar-thumb {
background-color: #ffc0cb !important; //滚动条颜色设置
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent
) !important;
border-radius: 2em;
}


陕ICP备2022011813 | 由又拍云提供CDN加速

十年之约