美文网首页
方法封装

方法封装

作者: 前端架构师陈龙威 | 来源:发表于2020-04-02 16:14 被阅读0次

前言

本文用于记录常用或好用的方法

列表

  • 隐藏元素:el.style.display = 'none'

  • 检查元素是否包含指定类:el.classList.contains(className)

  • 元素类的切换:el.classList.toggle(className)

  • 获取当前页面的滚动位置:
    x轴:let x = window.pageXOffset !== undefined? window.pageXOffset : window.scrollLetf;
    y轴:let y = window.pageYOffset !== undefined? window.pageYOffset : window.scrollTop

  • 滚动到顶部:

const scrollToTop = () => {
    const s = document.documentElement.scrollTop || document.body.scrollTop;
    if (s > 0) {
        // window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,
        // 并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,
        // 该回调函数会在浏览器下一次重绘之前执行
        // 详细资料:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, c - c/ 8);
    }
}

相关文章

网友评论

      本文标题:方法封装

      本文链接:https://www.haomeiwen.com/subject/iuvxphtx.html