Stellar滚动框美化

前言

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

旧的前言

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

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

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

局限

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

Chrome	Edge	Firefox	Opera	Safari
✓	✓	x	✓	✓

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

办法在这里捏

https://juejin.cn/post/6844904004879843336https://juejin.cn/post/6844904004879843336

方法

本着不改动主题源文件的原则，因为这样之后更新就有点麻烦，所以我决定，曲线救国，通过引用滚动条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;
  }

CC BY-NC-ND 4.0 若你喜欢我的文章欢迎互动，玩的愉快！

Stellar滚动框美化

前言

局限

方法

新建 scrollbar.css

引入css文件

更多

新建 `scrollbar.css`