간헐적이고 원활한 스크롤 효과 (GIF로 녹화하는 효과는 좋지 않습니다. 관심이 있으시면 코드를 다운 할 수 있습니다). 특정 콘텐츠는 다음과 같습니다.
암호:
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll </title> <style> *{마진 : 0; 패딩 : 0;} .box {width : 500px; 높이 : 400px; 40px auto;}. .Block {위치 : 상대; 너비 : 500px; 높이 : 400px; 오버플로 : hidden;} .item {height : 40px; 배경 : 빨간색; 색상 : #fff; line-height : 40px; 텍스트-알 데그 : 센터;} .item : nth-Child (2n) {배경 : #000} <var script (varlup =) < 기능 (JSON) {var objscroll = getElementById (json.id); objscroll.scrolltop = 0; objscroll.scrolltop ++; setInterVal () {scrolling ()} {var timer = setInterval (scrollup ()}, 30); ClearInterval (타이머); window.onload = function () {// on : 간헐적 스크롤/원활한 스크롤 높이 : 간헐적 스크롤 업 ({on : true, id : 'block'}); Scrollup ({id : 'block2', 높이 : 120}); . <div> 8 Seamless Scroll </div> <div> 9 Seamless Scroll </div> <div> 10 Seamless Scroll </div> <div> 11 Seamless Scroll </div> <div> 12 Seamless Scroll </div> <div> 13 Seamless Scroll </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> id = "block2"> <div> 1 간헐적 스크롤 </div> <div> 1 간헐적 스크롤 </div> <div> 2 간헐적 스크롤 </div> <div> 3 간헐적 스크롤 </div> <div> 4 간섭 스크롤 </div> <div> 6 간섭 스크롤 </div> 7 Intermentent 스크롤 </div> <div> 8 간헐적 스크롤 </div> <div> 9 간헐적 스크롤 </div> <div> 10 간헐적 스크롤 </div> <div> 11 간헐적 스크롤 </div> <div> 12 간헐적 스크롤 </div> <div> <div> </div> 14 intermittent scroll </div> </div> 14 </div> </div> </div> </body> </html>메모:
1. 박스 블록은 CSS 오버플로 및 숨어 있어야합니다 : 오버플로 : 숨겨
2. 간헐적 스크롤/원활한 스크롤링의 두 가지 기능이 있습니다
3. 먼저 정확히 동일한 코드의 조각을 복사하고 원활하게 스크롤하십시오. 실행 타이머는 스크롤 탑 값을 계속 증가시킵니다. 스크롤 탑 값이 박스 높이보다 클 때 스크롤 탑을 0으로 설정하고 다시 시작하십시오. 이 기준으로 간헐적 스크롤링이 추가되고 Settimeout은 간헐적으로 실행되며 ScrollTop이 도착하면 지정된 높이가 중지됩니다.
4. 질문 : setInterVal (function () {scrolling ()}, 30); 코드에서는 SetInterval ( 'scrolling ()', 30)을 작성하여 실행할 수 있습니다. 이것은 작동하지 않습니다. 위대한 마스터의지도가 있습니까? 둘의 차이점은 무엇입니까? 메커니즘은 무엇입니까?
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.