Node.js 웹 페이지 스크롤 막대 스크롤 이벤트 예 analyze_javascript 기술

이 글의 예시에서는 js 웹페이지 스크롤바의 스크롤 이벤트 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

js가 최상위로 돌아가는 효과를 수행할 때 웹페이지의 스크롤 막대 스크롤 이벤트를 모니터링해야 합니다. 이 이벤트는 window.onscroll입니다. onscroll 이벤트가 발생하면 js를 사용하여 페이지의 scrollTop 값을 가져옵니다. scrollTop이 설정된 값이라고 판단되면 "Return to Face"가 표시됩니다

js 웹 스크롤바 스크롤 이벤트

<style type="text/css"> 
#top_div{ 
  position:fixed; 
  bottom:80px; 
  right:0; 
  display:none; 
} 
</style> 
<script type="text/javascript"> 
window.onscroll = function(){ 
  var t = document.documentElement.scrollTop || document.body.scrollTop; 
  var top_div = document.getElementById( "top_div" ); 
  if( t >= 300 ) { 
    top_div.style.display = "inline"; 
  } else { 
    top_div.style.display = "none"; 
  } 
} 
</script> 
<a name="top">顶部<a> 
<div id="top_div"><a href="#top">返回顶部</a></div> 
<br /> 
<br /> 
<div> 
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去 
</div>

구문 설명 예시

먼저 스타일 태그에 top_div CSS 속성을 정의합니다. position:fixed;display:none이 핵심입니다

자바스크립트 문에서 t는 스크롤 막대의 아래쪽 스크롤 위치를 가져옵니다. ||는 더 나은 호환성을 고려하기 위한 것입니다.
스크롤이 300(픽셀)을 초과하면 top_div CSS 표시 속성을 표시(인라인)로 설정하고, 그렇지 않으면 숨김(없음)으로 설정하세요

DOCTYPE 유형을 설정해야 하며 document.documentElement를 사용하여 IE에서 창의 너비와 높이를 얻을 수 있습니다

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.