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

6년 전 조회 10,067

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

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

1954537950_1561962973.1172.png

답변 4개

채택된 답변
+20 포인트

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

https://cofs.tistory.com/191

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

답변에 대한 댓글 1개

6년 전
위아래는 해보겠는데 좌우로는... 좌우 값이랑.. 보내는 법을 모르겟어서요..

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

978180634_1712028424.8656.png

Copy
<!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>
로그인 후 평가할 수 있습니다

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

document.body.scrollLeft =10000; 하면 됩니다

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

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

6년 전

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

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

답변에 대한 댓글 1개

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

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

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

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

로그인
🐛 버그신고