关于浏览器显示的一些有趣操作~~~

监听用户停留页面并改变标题显示

var normal_title = document.title;
document.addEventListener('visibilitychange', function() {
    if(document.visibilityState == 'hidden') {      // 用户离开页面
        document.title = '肥来接着看鸭(づ￣ 3￣)づ~~~';
    } else {
        document.title = normal_title;
    }
});

用户停留当前页时

用户离开当前页时

通过样式自定义浏览器右侧滚动条

::-webkit-scrollbar {
    width: 30px;    // 滚动条宽度
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;    // 滚动条圆角
    background-color: rgba(0, 69, 109, 0.2);  // 滚动条背景
    ...
    // 可添加更多样式
}

浏览器滚动条默认样式

修改后的样式

也可调整至仅对某元素生效

.bar::-webkit-scrollbar {}
.bar::-webkit-scrollbar-thumb {}

通过 CSS 更改鼠标指针样式

鼠标指针的不同样式

鼠标的样式变化和cursor属性有关，默认值为 default

cursor: default;

也可设置以下属性值

default：默认光标；
pointer：超链接的指针；
wait：表示程序正在忙；
help：指示可用帮助；
text：指示文本；
crosshair：鼠标呈现十字状；

鼠标悬浮以下文字查看效果：

默认光标 超链接的指针小手 指程序正在忙沙漏 指示可用的帮助 指示文本 十字状

使用图片文件

cursor 属性可以使用 url 赋值一个图片文件。

cursor: url(图片地址), pointer;