前言
單頁(yè)/全屏滾動(dòng)頁(yè)面越來(lái)越常見(jiàn)了,它多用于產(chǎn)品介紹、招聘等內(nèi)容較少的簡(jiǎn)單頁(yè)面。針對(duì)這種效果也出現(xiàn)了不少 jQuery 插件,本文實(shí)現(xiàn)的效果類似于fullpage的單屏滾動(dòng),使用原生JS實(shí)現(xiàn),不依賴任何js庫(kù);
css代碼:
html,body {height:100%;}body {margin:0px;}div {height:100%;}html代碼:
<div style="background:#FEE;"></div><div style="background:#EFE;"></div><div style="background:#EEF;"></div><div style="background:red;"></div>
js代碼:
document.addEventListener("DOMContentLoaded", function() { var body = document.body, html = document.documentElement; var itv, height = document.body.offsetHeight; var page = scrollTop() / height | 0; //窗口大小改變事件 addEventListener("resize", onresize, false); onresize(); //滾輪事件 document.body.addEventListener( "onwheel" in document ? "wheel" : "mousewheel", function(e) { clearTimeout(itv); itv = setTimeout(function() { var delta = e.wheelDelta / 120 || -e.deltaY / 3; page -= delta; var max = (document.body.scrollHeight / height | 0) - 1; if (page < 0) return page = 0; if (page > max) return page = max; move(); }, 100); e.preventDefault(); } ); //平滑滾動(dòng) function move() { var value = height * page; var diff = scrollTop() - value; (function callee() { diff = diff / 1.2 | 0; scrollTop(value + diff); if (diff) itv = setTimeout(callee, 16); })(); }; //resize事件 function onresize() { height = body.offsetHeight; move(); }; //獲取或設(shè)置scrollTop function scrollTop(v) { if (v == null) return Math.max(body.scrollTop, html.scrollTop); else body.scrollTop = html.scrollTop = v; };});在線演示請(qǐng)點(diǎn)擊:這里
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注