Javascript пользовательский прокрутки JS с тем же поведением, что и по умолчанию - PullRequest
Новая
       24

Javascript пользовательский прокрутки JS с тем же поведением, что и по умолчанию

0 голосов
/ 12 июня 2018

Я взял горизонтальную полосу прокрутки внутри div. 

        <div id="custom_scroll" style="width: 91%; overflow: auto; margin: 0 3%;">
            <div id="custom_scroll_child" style="width: 100%">
                &nbsp;
            </div>
        </div>

Я увеличиваю ширину внутреннего div # custom_scroll_child.Но эти полосы прокрутки не видны в мобильном телефоне.Поэтому я хочу включить библиотеку JS.

Когда я добавляю любую js-библиотеку, например mCustomScrollbar, ширина полосы прокрутки и прокрутка влево не совпадают по сравнению с полосой прокрутки по умолчанию.

Поэтому я хочу создать собственную полосу прокрутки.Но хочу поведение родной полосы прокрутки.

Так как мне этого добиться?Пожалуйста, ведите меня.

1 Ответ

0 голосов
/ 04 июля 2018

попробуйте следующее.

<style>
    body {
        margin: 0px;
        padding: 0px;
        color: black;
    }
    .custom_scroll {
        width: 91%;
        overflow: auto;
        margin: 0 3%;
        height: 200px;
        border: 1px solid red;
    }
    .custom_scroll_child {width: 120%;}

    /* Here you can easily customize it*/
    body ::-webkit-scrollbar {-webkit-appearance: none;}
    body ::-webkit-scrollbar:vertical {width: 12px;}
    body ::-webkit-scrollbar:horizontal {height: 12px;}
    body ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        border: 2px solid #ff0;
    }
    body ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #f0f;
    }
</style>
<div class="custom_scroll">
    <div class="custom_scroll_child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At consectetur nam repudiandae odit illo minima dolorum nihil voluptatibus blanditiis recusandae culpa esse mollitia facere quasi, dignissimos, aperiam iure optio reiciendis?
    </div>
</div>

здесь a jsfiddle

...