html鼠标平滑滚动效果,玩的嗨 - 【随笔】原生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)

}