【随笔】原生js实现鼠标单击平滑滚动一屏

释放双眼,带上耳机,听听看~!

做了小东西,一个辅助阅读文章的小功能

主要是手机端来用的

废话不多说

拆分两部分

/**
* 单击事件自动向上或向下滚动一屏
*/
function paging(e) {
    //获取鼠标位置(相对于浏览器)
    var x = event.clientY;
    //获取窗口高度
    var h = window.innerHeight;
    //获取当前位置
    var c = document.body.scrollTop;
    //计算滚动距离
    var t = x > (h / 2) ? h : -h;
    //开滚
    scrollAnimation(c, c + t);
}
/**
 * 动画垂直滚动到页面指定位置
 * @param { Number } currentY 当前位置
 * @param { Number } targetY 目标位置
 */
function scrollAnimation(currentY, targetY) {
  // 获取当前位置方法
  // const currentY = document.documentElement.scrollTop || document.body.scrollTop

  // 计算需要移动的距离
  let needScrollTop = targetY - currentY
  let _currentY = currentY
  setTimeout(() => {
    // 一次调用滑动帧数,每次调用会不一样
    const dist = Math.ceil(needScrollTop / 10)
    _currentY += dist
    window.scrollTo(_currentY, currentY)
    // 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果
    if (needScrollTop > 10 || needScrollTop < -10) {
      scrollAnimation(_currentY, targetY)
    } else {
      window.scrollTo(_currentY, targetY)
    }
  }, 1)
}

 

人已赞赏
PHP随笔

【随笔】Laravel跳坑实录

2019-9-25 9:51:48

瞎捯饬随笔

【随笔】Linux下”>>“、”>“及”<“的区别及应用

2019-10-30 14:36:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索