브라우저 탭 2개 스크롤 동기화 (웨일, 크롬 브라우저)

웨일 브라우저는 듀얼탭을 지원하지만

탭 2개의 스크롤 동기화는 지원하지 않는다.

사람들이 질문은 하던데...

https://forum.whale.naver.com/topic/38190/

듀얼탭 동시 스크롤 기능 추가해주세요!

https://forum.whale.naver.com/topic/46008/?tab=comments#comment-109077 

듀얼탭 스크롤

 

왼쪽은 영어, 오른쪽은 한글로 번역하고, 양쪽 스크롤이 같이 움직이면 굉장히 편리할 것 같다.

 

구현

javascript로 탭 2개의 스크롤 동기화 구현은 가능하다.

한쪽 탭의 스크롤이 변경되었을때, 다른 쪽 탭에서 이를 감지해서 자동으로 스크롤을 변경해주면 된다.

우선 2개 탭이 공유할 저장소가 필요하고, 브라우저 제품이 동일하다는 전제하에 window.localStorage가 적당해 보인다.

(서로 다른 브라우저 제품간 공유를 하려면 http api server가 필요할 듯 하다. 나중에...)

 

javascript는 간단하다. scroll 이벤트를 감지해서 localStorage에 저장하고, 동시에 주기적으로 localStorage의 값을 조회해서 화면 스크롤을 갱신한다. 이 작업을 양쪽 탭 모두 하면, 양방향으로 스크롤 동기화가 가능하다.

    (function () {
      localStorage.setItem("scrollY", window.scrollY);
      var temp = null;
      document.addEventListener('scroll', (e) => {
        temp = window.scrollY;
        localStorage.setItem("scrollY", window.scrollY);
      });

      setInterval(() => {
        var scrollY = localStorage.getItem("scrollY");
        if (scrollY === null) {
          return;
        }
        scrollY = parseInt(scrollY);
        if (temp === scrollY) {
          return;
        }
        window.scrollTo(0, scrollY);
        temp = scrollY;
      }, 100);
    })();

소스코드를 minify해서 브라우저 북마크로 등록해서 사용하면 편리하다.

!function(){localStorage.setItem("scrollY",window.scrollY);var l=null;document.addEventListener("scroll",r=>{l=window.scrollY,localStorage.setItem("scrollY",window.scrollY)}),setInterval(()=>{var r=localStorage.getItem("scrollY");null!==r&&l!==(r=parseInt(r))&&(window.scrollTo(0,r),l=r)},100)}();

 

단점

원본과 번역본의 화면 길이가 완전히 동일하지 않기 때문에 약간의 스크롤 오차는 발생한다.

브라우저 화면이 바뀌면, javascript를 다시 실행해야 한다.

 

결과

(웨일 브라우저에서 테스트하였다. 크롬 브라우저도 사용법은 동일하다.)