[JavaScript] 챗봇 내 스크롤링 기능 on/off

 

K사의 챗봇에는 2가지가 있다.
K사의 기본 챗봇과 고객사의 요청이 있을 시, 고객사의 홈페이지에 맞게 커스터마이징 해서 사용할 수 있는 챗봇.
기본 챗봇은 어차피 톡 내에서 사용이 되기 때문에 크게 신경 쓸 것은 없다.
하지만 커스터마이징 해서 사용하는 챗봇의 경우에는 고객사의 요구에 맞게 수정되어야 할 부분들이 몇 가지 있다.
크게 어려운 부분들은 아니겠지만, 그럼에도 실제 프로젝트에서 역할을 맡아 해보니 확실히 이론으로 배우기만 하는 것보다는 얻는 게 많다고 생각했다.

개발자에게 필요한 것 중에 하나가 구글링이라고 하던데, 이번 기회를 통해 열심히 구글링을 하며 찾아낸 자료를 실제 코드 안에 삽입하기도 했다.
그 기회를 통해 "아! 이렇게 하면 되는구나!"라는 걸 살짝 맛 본(?) 것 같다.
완전히 언어를 사용하는 프로젝트는 아니지만, 그럼에도 이번 기회를 통해 알 수 있던 것들을 부분 부분 업로드하려고 한다. (많지는 않다. 현재 하는 일이 언어를 다루지 않는 일이기 때문에 사소한 것조차도 나에게는 어렵다..)

그중에 하나는 '스크롤 기능'이다.
고객사 홈페이지에 챗봇 코드를 넣었는데, 챗봇 내에서 스크롤을 하면 홈페이지 페이지까지 스크롤이 되는 문제가 있었다.

이런 식이 었다.

챗봇 위에서 스크롤을 내리면, 뒤에 있는 페이지까지 함께 스크롤이 되는 현상.

 

해결과정

overflow: hidden;

구글링 하다가 찾은 건 overflow를 hidden으로 하는 거였다.

일단 이건 원활한 스크롤이 되지 않았다.

챗봇의 경계 부분에서 스크롤을 하면, 해당 페이지까지 같이 스크롤이 되었다.

그 외에 스크롤바를 없애보기도 했는데, 챗봇이 열릴 때 스크롤바가 없어진 그 공간으로 챗봇이 이동을 했다.

그리고 챗봇을 종료했을 때는 다시 스크롤바가 보이면서 플로팅버튼 위치가 이동을 했다.

역시 내가 원하는 기능은 아니었다.

 

 

 

그리고 드디어!

구글링 하다가 찾은 기능! (두둥)

 

  // 스크롤 고정 on
  document.querySelector(".WebChatArea").onmouseover = function () {
    let x = window.scrollX;
    let y = window.scrollY;
    window.onscroll = function () { window.scrollTo(x, y); };
  }

  // 스크롤 고정 off
  document.querySelector("WebChatArea").onmouseout = function () {
    window.onscroll = function () { };
  }

onmouseover 기능과 onouseout 기능을 사용했다.

챗봇에 마우스가 올라가있을 때 실행할 함수와 그리고 챗봇 밖으로 마우스가 나갔을 때 실행할 함수를 각각 설정했다.

처음 내가 참고한 코드는 var로 되어 있는데, let으로 수정했다.

 

function 안에 있는 것만 참고했고!

그 외에는 상황에 맞게 작성을 했다.

이렇게 코드를 작성한 덕분에!

챗봇 안에서 스크롤 시에는 챗봇 내 대화내용만 스크롤이 가능했다.

마우스를 밖으로 빼면 페이지의 스크롤이 가능하고, 챗봇은 스크롤이 되지 않는 걸 확인할 수 있었다.

밖에서 스크롤하는 건 미처 화면을 못 찍었지만, 제대로 작동하고 있었다.

 

 

 

프로젝트 진행 중 알게 된 부분 정리