Javascript custom scroll js with same behaviour as default

Question

I have taken a horizontal scroll bar inside a div.

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

I increase width of inner div#custom_scroll_child. But these scrollbar is not visible in mobile. So i want to include js library.

When i add any js library like mCustomScrollbar, It's scrollbar width and scroll left is not matching compared to default scroll bar.

So i want design of custom scrollbar. But want behaviour of native scrollbar.

So how can i achieve this? Please guide me.

I don't really understand your problem. Obviously if you are using custom scrollbars, you will hide the existing scroll bars. The custom scroll bars are consistent on their own. So why is it a problem that the native scrollbars display differently from the custom ones? — Sumurai8
– Sumurai8, Commented Jul 1, 2018 at 15:08
what do you want to achieve ? creating a custom scrollbar from scratch is a complicated task to do. you have to handle resize events and tons of calculation. also you have to handle it in different browsers. i recommend you to use a javascript library to do that — MajiD
– MajiD, Commented Jul 2, 2018 at 15:18
But child div #custom_scroll_child with width: 100% is not larger than the parent div. — Ranto Rasolomahefa
– Ranto Rasolomahefa, Commented Jul 4, 2018 at 6:47

fedeghe · Accepted Answer · 2018-07-04 18:57:00Z

try the following .

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

here a jsfiddle

Collectives™ on Stack Overflow

Javascript custom scroll js with same behaviour as default

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related