Hello, World!
이전 목록 다음
채택완료

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

ksoon
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 1,541

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개 / 댓글 4개

채택된 답변
+20 포인트
마마르스컴퍼니
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

→

Copy 
<script>
let wid = $('.scroll_menu_wrap').width();
$('.scroll_menu_wrap').scrollLeft(wid);
</script>

답변에 대한 댓글 1개

ksoon
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
답변 감사합니다! 최고입니다ㅠㅠ
ddkwkd
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

Copy 
<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>

<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>

<script>
window.onload = function() {
    document.getElementById('container').scrollLeft = document.getElementById('container').scrollWidth;
}
</script>

답변에 대한 댓글 2개

ksoon
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
답변 감사합니다ㅜㅜ
ksoon
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
답변 감사합니다ㅜㅜ
미미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

Copy 
jquery

$(".scroll_menu_wrap").scrollLeft($(".scroll_menu_wrap")[0].scrollWidth);

 

 

javascript

document.querySelector(".scroll_menu_wrap").scrollLeft = document.querySelector(".scroll_menu_wrap").scrollWidth;

답변에 대한 댓글 1개

ksoon
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
답변 감사합니다ㅜㅜ

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