Disbale Scroll by default, but activate it once clicked on the icon

Question

Disbale Scroll by default, but activate it once clicked on the icon

28 views Asked by ravxen At 27 October 2023 at 17:51

im pretty new to coding html/css and I cant figure out how to disable scroll by default (when opening the page) and activate it again once the user clicked on the icon. The icon itself causes the page to scroll down to the "introduction" div.

A nice bonus would be, that if the user scrolls up again and nothing but the start div is showing, it should disable again until clicked on the icon.

HTML/CSS only preferred, since I havent learned JavaScript yet and dont want use something I dont understand. If its not possible without, then no problem.

I already tried like 90% of the solutions that I found online, but I guess either the embedding of the javascript didnt work or the code itself doesnt work with my html/css code.

Heres my html code snippet:

</head>
    <body>
        <header>
                <h1 class="blur-in">Welcome, take your time.</h1><br>
                <div class="activateScroll">
                <a href="#fixedNavbar"><i class="fa-solid fa-chevron-down fa-2x slide-in"></i </a>
            </div>
        </header>
        <main>
            <div id="fixedNavbar">
                <nav>
                    <ul>
                        <li><a href="">home</a></li>
                        <li><a href="">skills & work</a></li>
                        <li><a href="">about me</a></li>
                        <li><a href="">contact</a></li>
                    </ul>
                </nav>
            </div>
            <section>
                <div class="introduction">

                </div>
            </section>
        </main>

    <footer>
    </footer>
    </body>
</html>

** Relevant CSS Code (everthing that could help) **

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    font-family: 'Libre Franklin';
}

html, body {
    width: 100%;
    height: 100vh;

    scroll-behavior: smooth;
}

.start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100vh;
}

#fixedNavbar {
    position: sticky;
    top: 0;
    width: 100%;

    z-index: 100;
}

Original Q&A

There are 1 answers

**Vince** · Accepted Answer · 2023-10-27 18:28:07

This may or may not be possible with some hacky CSS, but this is 100% the job of JavaScript.

Check out the CodePen here and let me know if you have any questions: https://codepen.io/vince1444/pen/vYbLLEv

<section id="hero">
  <header>
    <h1>Hero Section</h1>
    <a href="#about" id="about-anchor">Click to go to the about section</a>    
  </header>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, quis sequi nam labore dignissimos ullam minima voluptatibus fugiat facere accusantium. Repellat cupiditate eveniet velit aliquid ut iusto asperiores facere! Mollitia, quae adipisci ea rerum amet suscipit quod deleniti repudiandae quia eaque? Illo maiores, illum eveniet corporis odio corrupti saepe quos sequi nulla. Voluptates at iste sit officia id eveniet aut explicabo expedita odit! Sequi nulla cumque adipisci temporibus facilis, voluptas dicta nam natus provident libero impedit aliquam dolorum molestiae eligendi necessitatibus iure quaerat odit esse numquam quia. Suscipit odio ratione iste natus architecto temporibus harum voluptas ab sapiente hic voluptatum aliquid vel, perspiciatis esse mollitia consequatur, saepe vero placeat molestiae praesentium libero. Omnis quis incidunt harum sit natus facere id beatae ullam in hic, illo nisi blanditiis deleniti inventore deserunt voluptas suscipit animi rerum magni cum non nobis facilis? Laboriosam sit perspiciatis, ipsam voluptate inventore quibusdam nulla modi, libero, at minus adipisci culpa quidem eaque facilis id optio sequi quisquam iure tempora distinctio delectus illum itaque? Quidem sequi expedita voluptatibus officiis aperiam eaque ab nisi porro. Quod deserunt eum voluptas perspiciatis facere optio minima aliquid sint saepe vero eos amet atque doloribus, eligendi illo ut quis, veniam nostrum qui iste hic quas commodi. Delectus, dolore! Voluptatem, nostrum ullam. Aperiam vitae deserunt quas quos unde maiores quod! Distinctio dolorem adipisci molestias tenetur consectetur praesentium eius quisquam eaque harum! Sunt, sed, quo iure nobis impedit quaerat, quam ducimus molestiae id alias incidunt quod deserunt labore architecto quia vel earum soluta. Sit, excepturi illum quasi sequi ea corporis voluptatibus voluptas maiores quidem corrupti quod veritatis veniam! Quos rerum fugiat error, quidem quasi necessitatibus laborum. Nam dolorem natus, ipsa dolor voluptatum saepe recusandae! Possimus sapiente dolore est, consequuntur blanditiis adipisci nihil veritatis commodi quidem error? Dicta accusamus corporis ipsam aut qui, unde necessitatibus! Molestiae fugiat modi ducimus laborum aliquid dolore quod, aliquam ipsam excepturi culpa qui. Deserunt provident, dolore, maiores aliquam accusantium nesciunt libero esse accusamus repudiandae numquam repellat asperiores molestiae temporibus earum, alias quidem! Aspernatur distinctio ea amet consequatur blanditiis, quasi nobis quae facilis assumenda quod a! Nulla excepturi, nam fugit a, expedita exercitationem commodi optio autem iste omnis doloremque ad facere ab. Repudiandae dicta magnam itaque esse dolores et est explicabo sed culpa, deserunt consequuntur, sequi officiis ex, quae iste eveniet odio commodi laborum. Fugiat at qui iure consectetur eaque necessitatibus non quod laboriosam vero, accusantium voluptatum explicabo in ad. Ducimus obcaecati dolores eligendi. Sed explicabo sunt repudiandae. Vero minus tenetur illum consectetur blanditiis. Voluptatem quo praesentium tempora laboriosam accusantium est nulla deserunt rerum, illo explicabo repudiandae optio reiciendis corrupti repellendus, sunt, provident saepe maxime beatae sit nihil ipsam consequuntur? Similique nam iste magni laborum doloremque vero id iure ad amet, consequuntur iusto animi dolor voluptates quisquam labore maxime dolorem tempore numquam accusantium esse officiis aut ducimus! Tempore nesciunt, porro officiis eligendi necessitatibus quod magnam repudiandae exercitationem esse eveniet rerum harum modi quas hic voluptate ab est quae! Consequuntur praesentium aliquam ex iusto cupiditate quaerat velit accusamus. Unde voluptatum labore quod sit ullam eius ab harum, ea sed praesentium doloribus molestias recusandae eligendi non quam exercitationem sint explicabo ipsam excepturi dicta consequuntur veniam. Nemo repellat neque provident ducimus accusantium sit saepe expedita nulla aut quasi! Temporibus minus expedita voluptatum perferendis repudiandae vitae sint possimus excepturi, omnis dicta provident, doloremque animi in qui sapiente odio. Consequuntur aspernatur reprehenderit ipsam, ad enim laborum dignissimos deserunt hic perferendis facere similique possimus dolorum rerum quis architecto dolorem quo dicta eius fugiat laudantium vero quas? Cumque, officiis impedit laborum doloribus quidem tempore amet reprehenderit eveniet molestias et, necessitatibus autem architecto repudiandae at ipsum debitis in labore molestiae asperiores eos nihil eaque illum assumenda doloremque. Minus cumque impedit optio debitis voluptate excepturi sed incidunt molestias, sit quod corrupti mollitia aperiam! Repudiandae in rerum dignissimos reprehenderit sit minima pariatur unde fugiat eveniet assumenda alias neque, quo sapiente temporibus aliquam error nihil dolore quasi beatae quod inventore laboriosam eum, a sunt. Ipsa hic a ab incidunt unde dicta accusantium accusamus quod ducimus quidem ullam repellendus sequi dolorem explicabo ex, cumque tenetur amet blanditiis nam? Autem earum nostrum laudantium dolores quam repellendus quos quibusdam, voluptas qui provident ab voluptatem? Debitis nobis explicabo beatae earum ullam nam a modi velit totam eius corporis cum, fugit, quos vitae dolore illo quo ipsam excepturi sunt quisquam reprehenderit! Odio distinctio cum quae eos sed, totam necessitatibus architecto animi sit molestias! Commodi libero, et ipsum nesciunt tempore ducimus eum deserunt? Obcaecati vero odio culpa nobis sapiente facere dicta ad doloribus fugit iusto officiis rerum laudantium architecto delectus tenetur commodi animi eos, cumque quae consequuntur unde laboriosam provident beatae molestiae. Labore cumque excepturi, est neque sed, odio fugit ullam voluptate consequuntur alias itaque voluptatem omnis illo deleniti ipsa, ducimus cum voluptatibus autem hic minus vel fugiat eaque ea! Sapiente, esse saepe tenetur doloribus modi placeat, qui autem delectus dolorem mollitia magnam nam maxime perspiciatis perferendis necessitatibus, culpa cum deleniti quas quidem minus minima ad accusantium. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor. Veritatis quae ex nesciunt dolor.
  </p>
</section>
<section id="about">
  <header><h2>About Section</h2></header>
  <p>Hello, world!</p>
</section>

body {
  overflow-y: hidden;
}

const body = document.body; // selects the body tag
const aboutAnchor = document.querySelector("#about-anchor"); // selects our anchor tag with id of about-anchor

// adds an event listener to our about-anchor which listens
// for a click event (when the user clicks on the anchor)
aboutAnchor.addEventListener("click", (event) => {
  // sets the inline styling of the body tag
  // equivalent to setting overflow-y: auto in CSS
  body.style.overflowY = "auto";
});

// adds an event listener to the Window global object
// that fires a function whenever a user scrolls
window.addEventListener("scroll", (event) => {
  // if the user is at the top of the page
  if (window.scrollY === 0) {
    body.style.overflowY = "hidden";
  }
});

TechQA.

Disbale Scroll by default, but activate it once clicked on the icon

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in SCROLL

Related Questions in ICONS

Related Questions in DISABLE

Popular Questions

Popular Tags

Trending Questions