search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.78k stars 214 forks source link

doesnt work when using cdn #553

Closed issam-seghir closed 1 year ago

issam-seghir commented 1 year ago

Describe the bug

A clear and concise description of what the bug is.

image

After adding data-overlayscrollbars-initialize the native scroll bar disappears

gif

Expected behavior

initialize the object

Examples


<!DOCTYPE html>
<html lang="en" data-overlayscrollbars-initialize>
    <head>
        <meta charset="UTF-8" />
        <title>Click and Drag</title>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.3.0/styles/overlayscrollbars.min.css" integrity="sha512-MMVRaRR0pB97w1tzt6+29McVwX+YsQcSlIehGCGqFsC+KisK3d2F/xRxFaGMN7126EeC3A6iYRhdkr5nY8fz3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>

    <body data-overlayscrollbars-initialize>
        <div data-overlayscrollbars-initialize class="items">
            <div class="item item1">01</div>
            <div class="item item2">02</div>
            <div class="item item3">03</div>
            <div class="item item4">04</div>
            <div class="item item5">05</div>
            <div class="item item6">06</div>
            <div class="item item7">07</div>
            <div class="item item8">08</div>
            <div class="item item9">09</div>
            <div class="item item10">10</div>
            <div class="item item11">11</div>
            <div class="item item12">12</div>
            <div class="item item13">13</div>
            <div class="item item14">14</div>
            <div class="item item15">15</div>
            <div class="item item16">16</div>
            <div class="item item17">17</div>
            <div class="item item18">18</div>
            <div class="item item19">19</div>
            <div class="item item20">20</div>
            <div class="item item21">21</div>
            <div class="item item22">22</div>
            <div class="item item23">23</div>
            <div class="item item24">24</div>
            <div class="item item25">25</div>
        </div>
        <script>
            ....
        </script>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha512-tu2VesH7qQi/IX4MN47Zw0SCia4hgBgu4xY/fP/gV2XcqdZsIh1B5wbSy4Mk5AhkkfTj/XMDQt86wzsZIsxPSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        document.addEventListener("loadedmetadata", function () {
            // Get a reference to the target element by its ID or selector
            const targetElement = document.querySelector(".items");

            // Initialize OverlayScrollbars
            const osInstance = OverlayScrollbars(targetElement, {
                scrollbars: {
                    theme: "os-theme-dark",
                    visibility: "auto",
                    autoHide: "never",
                    autoHideDelay: 1300,
                    autoHideSuspend: false,
                    dragScroll: true,
                    clickScroll: false,
                    pointers: ["mouse", "touch", "pen"],
                },
            });
        });
    </script>
</html>

Environment

KingSora commented 1 year ago

Good day @issam-seghir :)

I made an working example for you here: https://jsfiddle.net/a1yko73x/

issam-seghir commented 1 year ago

Thank you, my mistake. I missed this line: const { OverlayScrollbars } = OverlayScrollBarsGlobal;

KingSora commented 1 year ago

Glad I could help! :)