스크롤 하단으로 고정

스크롤 하단으로 고정

QA

스크롤 하단으로 고정

답변 3

본문

안녕하세요.

그누보드 공부중에 있습니다.

아래의 링크  Chat-GPT의  "묵공님" 링크를 사용중에 있습니다.

https://sir.kr/g5_skin/55009?page=5

 
질문 내용입니다. : 

Chat-GPT에서 

질문과 내용이 스크롤 하단으로 고정 시키는 방법이 있을까요?

 

1893543541_1690428132.837.png

 

테스트 중인 자료 : https://wedgo1.cafe24.com/POTAL/bbs/main.php?gid=TORON

 

위에 한문장을 물어보면 질문내용 이렇게 출력은 잘됩니다.

그런데 문장이 위쪽에 고정이 되어 매번 아래로 스크롤 되어야 하기에
아래쪽으로 고정이 필요할듯합니다.

테스트 해보니까 새로 만든 textarea가 기존의  "text-davinci-003" textarea부분이 따로 적용 되는듯 해서요.

아래는 textarea 내용 코드입니다.

<textarea id="wr_content" value="wr_content"  style="overflow: auto !important;  height: 160px;  padding: 4px 6px;  border: 1px solid #DDD;  border-radius: 10px !important; font-size: 14px;">
</textarea>    

 

구글링 해봐도 일반적인 코드만 있습니다.
-----------------------------------------------------------
GPT 코드를 보니까 
--> if (wr_content.value != '') wr_content.value += '\n\n'// 한 개의 대화가 끝나는 지점 개행

  wr_content.value += '질문: ' + MeQ

  txtMsg.value = ''
------------------------------------------------------------
위에 코드부분에 새로 구글링한 코드를 사용해서..

클래스 "div"를 수정해서 적용

const $element = document.querySelecotr("div");

$element.scrollTop = $element.scrollHeight;

 --> 이것을 

const $element = document.querySelecotr("wr_content");

$element.scrollTop = $element.scrollHeight;

---> 이렇게 해도 안되네요.

고정되는 부분이 -> $element.scrollTop = $element.scrollHeight;
인듯한데 어떻게 해야될런지요?

이 질문에 댓글 쓰기 :

답변 3

HTMLElement.blur, HTMLElement.focus 이벤트 를 사용해볼수 있습니다.

 

/POTAL/js/ChatGPT.js


function Send () {
  ...
  aiHttp.onreadystatechange = function () {
    if (aiHttp.readyState === 4) {
      ...
      wr_content.blur(); // added
      wr_content.focus(); // added
    }
  }
 
  ...
 
  if (wr_content.value != '') wr_content.value += '\n\n'// 한 개의 대화가 끝나는 지점 개행
  wr_content.value += '질문: ' + MeQ
  txtMsg.value = ''
  wr_content.focus(); // added
}

배르만 님 답변 감사합니다. 적용을 해보니  "질문" 요것은 아래 스크롤 하단에 고정이 됩니다. 단지 GPT검색시 내용은 스크롤바가 중간에 걸쳐있어서 스크롤하게 되어있어요. 감사합니다. 질문만이라도 내용이 하단으로 내려온걸로 사용해야겠습니다. ^^


      wr_content.blur(); // added
      wr_content.focus(); // added

부분의 삽입 위치가 잘못되었습니다.

if (aiHttp.readyState === 4) {
블록 상단이 아닌 가장 하단에 위치해야 합니다.



        if (s == '') s = '응답이 없습니다!'
        wr_content.value += s
      }
      wr_content.blur(); // added
      wr_content.focus(); // added
    }
  }


var vScrollDown = $("#wr_content").prop('scrollHeight');
$("#wr_content").scrollTop(vScrollDown);

이렇게 하시면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 138
© SIRSOFT
현재 페이지 제일 처음으로