How to realize floor effect with JavaScript

This article introduces the relevant knowledge of "how to achieve floor effect with JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

* {margin: 0; padding: 0;} html, body {width: 100%; height: 100%;} ul {width: 100%; height: 100%;} ul > li {list-style: none Width: 100%; height: 100%; font-size: 100px; text-align: center;} ol {position: fixed; left: 10px; top: 50%; transform: translateY (- 50%) } ol > li {list-style: none; width: 100px; line-height: 40px; text-align: center; border: 1px solid # 000;} .selected {background: skyblue } I am the first layer, I am the second layer, I am the third layer, I am the fourth layer, I am the fifth layer, the first layer, the second layer, the third layer, the fourth layer, the fifth layer.

Js:

/ / 1. Initialization floor color let oPages = document.querySelectorAll ("ul > li"); let colorArr = ['green',' blue', 'purple',' red', 'yellow']; for (let I = 0; I)

< oPages.length; i++) { let page = oPages[i]; page.style.background = colorArr[i]; } // 2.实现点击谁就选中谁 let oItems = document.querySelectorAll("ol>

Li "); let currentItem = oItems [0]; / / get the height of the visual area let screenHeight = getScreen (). Height; let timerId = null; for (let I = 0; I < oItems.length; iTunes +) {let item = oItems [I]; item.onclick = function () {currentItem.className =" This.className = "selected"; currentItem = this; / / achieve scrolling / / window.scrollTo (0, I * screenHeight); / / Note: Web page scrolling is achieved through documentElement.scrollTop, and the unit / / document.documentElement.scrollTop = I * screenHeight + "px" cannot be added when setting the value. / / document.documentElement.scrollTop = I * screenHeight; clearInterval (timerId); timerId = setInterval (function () {let begin = document.documentElement.scrollTop; let target = I * screenHeight; let step = (target-begin) * 0.2; begin + = step If (Math.abs (Math.floor (step)