js 작업 스크롤 막대 이벤트 example_javascript 기술

이 기사의 예에서는 js에서 스크롤 막대 이벤트를 작동하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

스크롤바 이벤트를 모니터링하는 방법이 항상 궁금했는데, 오늘 드디어 이해하게 되었습니다.

아래 코드는 스크롤바가 움직이는 동안 이를 모니터링하는 코드이며, 아래 코드는 최상위 div를 반환하여 표시하고 숨깁니다

window.onscroll = function () { 
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t > 0) { 
    $(".cbbfixed").css("bottom", "10px"); 
  } else { 
    $(".cbbfixed").css("bottom", "-85px"); 
  } 
}

참고:

t: 스크롤바와 상단 사이의 거리

t>0, 즉 스크롤바가 스크롤되면 if() 문이 즉시 실행됩니다. else()의 코드는 스크롤바가 상단에 도달하면 상단 div로 돌아가서

맨 위로 돌아가기 버튼 클릭 동작:

$("#cgotop").click(function(){ 
  $('body,html').animate({ scrollTop: 0 }, 100); 
  return false; 
});

보충:

1. 특정 요소의 스크롤바 이벤트 모니터링

$(selector).scroll(function(){.......});

2. 스크롤 막대의 스크롤 거리를 가져옵니다

$(selector).scrollTop();
$(selector).scrollLefft();

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