본문 바로가기

Placing the scroll bar on the top of the div element. The difference between the bottom position of the scroll-bar and the top position of the scroll-bar code has been highlighted.

web/html5 by 낼스 2021. 9. 21.

# https://www.geeksforgeeks.org/how-to-change-the-position-of-scrollbar-using-css/

<!DOCTYPE html>
<html>

<head>
    <title>Customize the scroll-bar</title>

    <style>
        body {
            text-align: center;
        }
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }

        .Content{
            width: 300px;
            color: white;
            text-align: center;
        }

        .Flipped, .Flipped .Content{
            transform: rotateX(180deg);
        }

        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <div class="Container Flipped">
        <div class="Content">
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </div>
    </div>
</body>

</html>
저작자표시

'web > html5' 카테고리의 다른 글

머터리얼 디자인 웹 ( Material Design Component For Web )  (0) 2020.03.08
div edit on focus  (0) 2019.07.12
create line to svg  (0) 2019.07.12
w3school How To Create A Loader  (0) 2019.07.12
html5 device orientation (기기 방향전환)  (0) 2015.02.17

관련글

댓글

티스토리툴바