search

ashthornton / asscroll

Ash's Smooth Scroll 🍑
MIT License
947 stars 27 forks source link

Works in Codepen only #74

Closed t4rra closed 2 years ago

t4rra commented 2 years ago

Hello, I can't get asscroll to work inside of any other environment other than codepen. The code is 1:1 in both codepen and my desktop.

Here's the HTML code for my desktop recreation:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>

<body>
    <div asscroll-container>
        <div>
            <header>
                <h1>test test test</h1>
            </header>
            <main>
                <h1>test test test</h1>
            </main>
            <section>
                <h1>test test test</h1>
            </section>
        </div>
    </div>
    <script src="./ass.js"></script>
</body>

</html>

I'm pretty sure the problem is the way the JS is loaded, but I've tried putting the script tag in both the head tag and the body tag. I've tried it in both Firefox and Edge (chromium), and they both give a Uncaught SyntaxError: import declarations may only appear at top level of a module error back.

Any help is appreciated!

t4rra commented 2 years ago

It works now! You need to add type="module" into the script tag that imports the asscroll!

So the code now works, and looks like this: 

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>

<body>
    <div asscroll-container>
        <div>
            <header>
                <h1>test test test</h1>
            </header>
            <main>
                <h1>test test test</h1>
            </main>
            <section>
                <h1>test test test</h1>
            </section>
        </div>
    </div>
<!-- add type="module" for importing to function properly-->
    <script src="./ass.js" type="module"></script>
</body>

</html>