<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="Android mobile Chrome의 scrollTop 오류">
    <meta itemprop="description" content="Android mobile chrome에서는 알 수 없는 이유로 scroll이 최상단, 최하단까지 이동하지 않는 경우가 있다.">
    <meta itemprop="datePublished" content="2021-10-09T10:46:30+00:00">
    

    <div>
      
        <header>
          
          

  <p>
    

    

    
      
      

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


        </header>
      

      <section itemprop="text">
        
        <p>Android mobile chrome에서는 알 수 없는 이유로 scroll이 최상단, 최하단까지 이동하지 않는 경우가 있다.</p>

<p>원인은 이상하게도 최대 및 최소 scrollTop 값에 아주 약간 못미치는 값까지만 이동 가능하기 때문이다.</p>

<p>따라서 scrollTop 속성에 의존하여 scroll event를 fire하는 경우 오류가 발생할 수 있다.
케이스별로 정리하면 다음과 같다.</p>

<ol>
  <li>scroll 이 최하단에 위치할 때
    <ol>
      <li>정상 케이스
        <ol>
          <li>scrollTop === scrollHeight - clientHeight</li>
        </ol>
      </li>
      <li>비정상 케이스
        <ol>
          <li>scrollTop - 0.42xxxx.. === scrollHeight - clientHeight
            <ol>
              <li>이상하게도 최대 scrollTop에 아주 약간 못미치는 값까지만 이동 가능하다</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>scroll이 최상단에 위치할 때
    <ol>
      <li>정상 케이스
        <ol>
          <li>scrollTop === 0</li>
        </ol>
      </li>
      <li>비정상 케이스
        <ol>
          <li>scrollTop === 0.5714285969734192
            <ol>
              <li>기묘한 숫자가 된다</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

<p>flex-direction: column-revese일 때는 반대로 작동한다.</p>
<ol>
  <li>scroll이 최하단에 위치할 때
    <ol>
      <li>정상 케이스
        <ol>
          <li>scrollTop === 0</li>
        </ol>
      </li>
      <li>비정상 케이스
        <ol>
          <li>scrollTop === 0.5714285969734192</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>scroll 이 최상단에 위치할 때
    <ol>
      <li>정상 케이스
        <ol>
          <li>scrollTop === scrollHeight - clientHeight</li>
        </ol>
      </li>
      <li>비정상 케이스
        <ol>
          <li>scrollTop &lt; scrollHeight - clientHeight
            <ol>
              <li>이상하게도 최대 scrollTop에 아주 약간 뚫고 더 높이 이동한다</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

<p>테스트 환경</p>
<ul>
  <li>기기: LG Q52</li>
  <li>OS: Android 10; LM-Q520N Build/QKQ1.200614.002</li>
  <li>chrome version: 92.0.4515.131</li>
</ul>

<p>20210804</p>

        
      </section>

      

      


      
  

    </div>

    
      

    
  </article>

  
  
    
  
  
</div></div>

Never test

Android mobile chrome에서는 알 수 없는 이유로 scroll이 최상단, 최하단까지 이동하지 않는 경우가 있다.
원인은 이상하게도 최대 및 최소 scrollTop 값에 아주 약간 못미치는 값까지만 이동 가능하기 때문이다.
따라서 scrollTop 속성에 의존하여 scroll event를 fire하는 경우 오류가 발생할 수 있다.
케이스별로 정리하면 다음과 같다.
scroll 이 최하단에 위치할 때
    
정상 케이스
        
scrollTop === scrollHeight - clientHeight
비정상 케이스
        
scrollTop - 0.42xxxx.. === scrollHeight - clientHeight
            
이상하게도 최대 scrollTop에 아주 약간 못미치는 값까지만 이동 가능하다
scroll이 최상단에 위치할 때
    
정상 케이스
        
scrollTop === 0
비정상 케이스
        
scrollTop === 0.5714285969734192
            
기묘한 숫자가 된다
flex-direction: column-revese일 때는 반대로 작동한다.
scroll이 최하단에 위치할 때
    
정상 케이스
        
scrollTop === 0
비정상 케이스
        
scrollTop === 0.5714285969734192
scroll 이 최상단에 위치할 때
    
정상 케이스
        
scrollTop === scrollHeight - clientHeight
비정상 케이스
        
scrollTop < scrollHeight - clientHeight
            
이상하게도 최대 scrollTop에 아주 약간 뚫고 더 높이 이동한다
테스트 환경
기기: LG Q52
OS: Android 10; LM-Q520N Build/QKQ1.200614.002
chrome version: 92.0.4515.131
20210804

Android mobile Chrome의 scrollTop 오류

댓글