테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

스크롤이 오른쪽으로 가게 할 수있을까요? 채택완료

ksoon 1년 전 조회 1,197
답변 3
목록

https://sir.kr/qa/312442

안녕하세요 매번 물어보는 초보입니다.

이 링크 참고하여 스크롤이 오른쪽 끝부터 시작하도록 만들고 싶습니다.

참고하서 만들어 보았는데 작동을 안합니다ㅠ

혹시 어떤제 잘못 된 것인지 알 수 있을까요?

 

<div class="scroll_menu">
<div class="scroll_menu_wrap" id="container">
<div class="scroll_menu_tit">1번매뉴</div>
<div class="scroll_menu_tit">2번매뉴</div>
<div class="scroll_menu_tit">3번매뉴</div>
<div class="scroll_menu_tit">4번매뉴</div>
<div class="scroll_menu_tit">5번매뉴</div>
</div>
</div>

 

 

.scroll_menu {width:100%;background: #fff;font-size: 15px;font-weight: bold;word-spacing: -5px;border-bottom: 1px solid #dcdcdc;}
.scroll_menu_wrap {overflow-x:auto; white-space:nowrap;}
.scroll_menu_wrap::-webkit-scrollbar {display: none;}
.scroll_menu_tit {cursor: pointer;display:inline-block;background:#fff;padding: 15px 0;width:500;vertical-align: middle;text-align:center;margin: 0 10px;border-bottom: 2px solid #fff;color: #333;}

 

 

document.getElementById('container').scrollLeft = 2500;

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
마
마르스컴퍼니 Expert
1년 전

document.getElementById('container').scrollLeft = 2500;

→

</p>

<p><script>

let wid = $('.scroll_menu_wrap').width();

$('.scroll_menu_wrap').scrollLeft(wid);

</script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

k
ksoon
1년 전
답변 감사합니다! 최고입니다ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

d
dkwkd
1년 전

.scroll_menu_wrap::-webkit-scrollbar {display: none;}
이부분은 스크롤을 감추고 있어요 그외 잘 되는거 같은데요?

 </p>

<p>

<div class="scroll_menu">

    <div class="scroll_menu_wrap" id="container">

        <div class="scroll_menu_tit">1번매뉴</div>

        <div class="scroll_menu_tit">2번매뉴</div>

        <div class="scroll_menu_tit">3번매뉴</div>

        <div class="scroll_menu_tit">4번매뉴</div>

        <div class="scroll_menu_tit">5번매뉴</div>

    </div>

</div></p>

<p><style>

.scroll_menu {width:100%; background: #fff; font-size: 15px;font-weight: bold;word-spacing: -5px;border-bottom: 1px solid #dcdcdc;}

.scroll_menu_wrap {overflow-x:auto; white-space:nowrap;}

.scroll_menu_tit {cursor: pointer;display:inline-block;background:#fff;padding: 15px 0;width:500;vertical-align: middle;text-align:center;margin: 0 10px;border-bottom: 2px solid #fff;color: #333;}

</style></p>

<p><script>

window.onload = function() {

    document.getElementById('container').scrollLeft = document.getElementById('container').scrollWidth;

}

</script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

k
ksoon
1년 전
답변 감사합니다ㅜㅜ
k
ksoon
1년 전
답변 감사합니다ㅜㅜ

댓글을 작성하려면 로그인이 필요합니다.

미
미니님a Expert
1년 전

</p>

<p>jquery</p>

<p>$(".scroll_menu_wrap").scrollLeft($(".scroll_menu_wrap")[0].scrollWidth);</p>

<p> </p>

<p> </p>

<p>javascript</p>

<p>document.querySelector(".scroll_menu_wrap").scrollLeft = document.querySelector(".scroll_menu_wrap").scrollWidth;</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

k
ksoon
1년 전
답변 감사합니다ㅜㅜ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인