<div id="readability-page-1" class="page"><div id="main" role="main">
  
  



  <article class="page" itemscope="" itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="scroll event는 어디에서 발생하는가?">
    <meta itemprop="description" content="HTML element의 scroll 이벤트는 어디에서 발생하는가? 햇갈리는 질문이다. 다시 말해보자. 내가 일으킨 scroll 이벤트는 어느 element에서 잡아 채는가? 그래도 햇갈린다. 다시 말해보자. onscroll 이벤트를 어느 element에 설정해야지 내가 원하는대로 scroll 이벤트를 발생시킬 수 있는가?">
    <meta itemprop="datePublished" content="2024-10-30T23:50:30+00:00">
    

    <div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          less than 1 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <p>HTML element의 scroll 이벤트는 어디에서 발생하는가? 햇갈리는 질문이다. 다시 말해보자. 내가 일으킨 scroll 이벤트는 어느 element에서 잡아 채는가? 그래도 햇갈린다. 다시 말해보자. onscroll 이벤트를 어느 element에 설정해야지 내가 원하는대로 scroll 이벤트를 발생시킬 수 있는가?</p>

<p>브라우저 개발자 도구의 element 탭에 답이 있다.</p>

<h2 id="google-chrome-browser">Google Chrome browser</h2>

<p>구글 크롬 브라우저의 element 탭에서는 <code>scroll</code> 이라고 표시를 해준다. <code>scroll</code> 표시가 붙은 element에서만 onscroll 이벤트가 동작한다.</p>

<p><img src="https://lovemewithoutall.github.io/assets/images/2024-10-31-who-does-fire-scroll-event/chrome.png" alt="chrome devtools element tab"></p>

<p>chrome version 130</p>

<h2 id="safari-browser">Safari browser</h2>

<p>사파리 브라우저에서도 마찬가지다.</p>

<p><img src="https://lovemewithoutall.github.io/assets/images/2024-10-31-who-does-fire-scroll-event/safari-scroll-only.png" alt="safari element tab"></p>

<p>오히려 더 좋다. 사파리는 element에 <code>event</code>가 붙어있다면 추가로 표시를 해준다. 크롬 브라우저에는 없는 기능이다.</p>

<p><img src="https://lovemewithoutall.github.io/assets/images/2024-10-31-who-does-fire-scroll-event/safari-scroll-with-event.png" alt="safari element tab with scroll"></p>

<p><code>Event 마크</code>를 클릭하면 추가 정보도 보여준다. chrome에서는 번거로운 이벤트 디버깅을 하기도 쉽다.</p>

<p><img src="https://lovemewithoutall.github.io/assets/images/2024-10-31-who-does-fire-scroll-event/safari-event-info.png" alt="safari event info"></p>

<p>safari version 18.1</p>

<h2 id="firefox">Firefox</h2>

<p>파이어폭스 브라우저는 더더더 좋다. scroll 이벤트에 부착된 함수의 코드까지 한 눈에 볼 수 있다. 아래 캡쳐에서는 <code>react-dom</code>의 <code>dispatchContinuousEvent</code> 함수를 보여준다. 과연 개발자 도구의 근본이라 할 수 있다.</p>

<p><img src="https://lovemewithoutall.github.io/assets/images/2024-10-31-who-does-fire-scroll-event/firefox.png" alt="firefox"></p>

<p>firefox version 132</p>

<h3 id="디버깅이-막히면-다른-브라우저의-개발자-도구를-돌려보면-좋다">디버깅이 막히면 다른 브라우저의 개발자 도구를 돌려보면 좋다.</h3>

<p>20241031</p>

        
      </section>

      

      


      
  

    </div>

    
      

    
  </article>

  
  
    
  
  
</div></div>

Never test

HTML element의 scroll 이벤트는 어디에서 발생하는가? 햇갈리는 질문이다. 다시 말해보자. 내가 일으킨 scroll 이벤트는 어느 element에서 잡아 채는가? 그래도 햇갈린다. 다시 말해보자. onscroll 이벤트를 어느 element에 설정해야지 내가 원하는대로 scroll 이벤트를 발생시킬 수 있는가?
브라우저 개발자 도구의 element 탭에 답이 있다.
Google Chrome browser
구글 크롬 브라우저의 element 탭에서는 scroll 이라고 표시를 해준다. scroll 표시가 붙은 element에서만 onscroll 이벤트가 동작한다.
chrome version 130
Safari browser
사파리 브라우저에서도 마찬가지다.
오히려 더 좋다. 사파리는 element에 event가 붙어있다면 추가로 표시를 해준다. 크롬 브라우저에는 없는 기능이다.
Event 마크를 클릭하면 추가 정보도 보여준다. chrome에서는 번거로운 이벤트 디버깅을 하기도 쉽다.
safari version 18.1
Firefox
파이어폭스 브라우저는 더더더 좋다. scroll 이벤트에 부착된 함수의 코드까지 한 눈에 볼 수 있다. 아래 캡쳐에서는 react-dom의 dispatchContinuousEvent 함수를 보여준다. 과연 개발자 도구의 근본이라 할 수 있다.
firefox version 132
디버깅이 막히면 다른 브라우저의 개발자 도구를 돌려보면 좋다.
20241031

scroll event는 어디에서 발생하는가?

댓글