js的常用封装函数库之Dom操作:
/* * 函数功能:Dom */ // getScrollTop /** * @desc 获取滚动条距顶部的距离 */ function getScrollTop() { return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; } // offset /** * @desc 获取一个元素的距离文档(document)的位置,类似jQ中的offset() * @param {HTMLElement} ele * @returns { {left: number, top: number} } */ function offset(ele) { var pos = { left: 0, top: 0 }; while (ele) { pos.left += ele.offsetLeft; pos.top += ele.offsetTop; ele = ele.offsetParent; }; return pos; } // scrollTo var getScrollTop = require('./getScrollTop'); var setScrollTop = require('./setScrollTop'); var requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); /** * @desc 在${duration}时间内,滚动条平滑滚动到${to}指定位置 * @param {Number} to * @param {Number} duration */ function scrollTo(to, duration) { if (duration < 0) { setScrollTop(to); return } var diff = to - getScrollTop(); if (diff === 0) return; var step = diff / duration * 10; requestAnimationFrame( function () { if (Math.abs(step) > Math.abs(diff)) { setScrollTop(getScrollTop() + diff); return; } setScrollTop(getScrollTop() + step); if (diff > 0 && getScrollTop() >= to || diff < 0 && getScrollTop() <= to) { return; } scrollTo(to, duration - 16); }); } // setScrollTop /** * @desc 设置滚动条距顶部的距离 */ function setScrollTop(value) { window.scrollTo(0, value); return value; }