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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
스크롤이 오른쪽끝으로 갈수있게 할수있을까요?

QA

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

본문

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

제이쿼리를 사용해서 새로고침햇을때 스크롤이 왼쪽이아닌 맨 오른쪽으로 자동으로 이동할수 있도록이요

 

1954537950_1561962973.1172.png

이 질문에 댓글 쓰기 :

답변 4

제이쿼리로 가능합니다. 아래 예제 응용하시면되겠네요

https://cofs.tistory.com/191

.scrollLeft(1000); 이란게있네요!!

단지 가로를 1000 으로 주었을때 스크롤이 1000에 위치하게 하는것인데
브라우저 또는 해상도마다 가로폭이 틀려지기 때문에 추천드리지 않습니다.

위 제이쿼리 예제를 참조하셔서 현재 로드된 가로폭을 변수에 담고 해당 변수의
특정 부분에 위치하도록 적절하게 수정하셔서 사용하시길 권장합니다.

978180634_1712028424.8656.png

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        ul{list-style: none; display: flex; overflow-x: scroll; width: 20%; }
    </style>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $("document").ready(function(){
            $(".list").scrollLeft($(".list")[0].scrollWidth);
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
</body>
</html>

 

답변을 작성하시기 전에 로그인 해주세요.
전체 115
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT