My Study Blog项目中 常见的功能需求
需求:1.修改浏览器滚动条的样式(仿mac)
css:
css
/* 设置滚动条的样式 */
::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 8px;
background-clip: content-box;
border: 2px solid transparent;
}
body[scroll]::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .5);
}JS:(优化体验) 当停止滚动之后,自动隐藏滚动条 当开始滚动时,自动显示滚动条
js
// 设置滚动条的隐藏
// 设计思路 监听滚动事件,滚懂就显示滚动条,不滚动添加定时器,500ms后隐藏
window.addEventListener('scroll', function (ev) {
document.body.toggleAttribute('scroll', true)
this.timer && clearTimeout(this.timer)
this.timer = setTimeout(() => {
document.body.toggleAttribute('scroll')
}, 500)
})第二个需求(简单):毛玻璃的实现效果(CSS)
css
css
.NowInfo {
width: 800px;
height: 220px;
padding: 20px 20px 10px 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}第三个 : 返回顶部 按钮
js
const backTop = document.querySelector('.backTop')
backTop.addEventListener('click', () => {
console.log("212421");
window.scrollTo({
top: 0,
behavior: "smooth"
})
})第四个: 返回顶部按钮的隐藏 和 显示
节流 减少频繁滚动事件
js
let throttle = function (fn, delay) {
let timer = null;
return function () {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, delay);
}
};
};
window.addEventListener('scroll', throttle(() => {
console.log(123);
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop >= 500) {
backTop.style.display = "none"
} else {
backTop.style.display = "block"
}
}, 500))