스크롤 하단으로 고정
관련링크
본문
안녕하세요.
그누보드 공부중에 있습니다.
아래의 링크 Chat-GPT의 "묵공님" 링크를 사용중에 있습니다.
https://sir.kr/g5_skin/55009?page=5
질문 내용입니다. :
Chat-GPT에서
질문과 내용이 스크롤 하단으로 고정 시키는 방법이 있을까요?
테스트 중인 자료 : 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);
이렇게 하시면 됩니다.
네. Mins아빠 님 답변 주셔서 감사합니다. 알려주신 방법으로 해보겠습니다.
알려 주신 방법으로 했습니다. "질문" 요것은 아래 스크롤 하단에 고정이 됩니다. GPT내용은 스크롤 하게 될듯합니다.
위에 모두 도와 주신분들 결과 입니다.
내용 까지 스크롤은 되지 않아도 질문 까지 스크롤 되어서 오히려 이렇게 적용해서 사용하는 게낳을듯합니다.
