Why does Locomotive Scroll for smooth scrolling cause my <body> not to display entirely (i.e., some elements are hidden)?

Question

Why does Locomotive Scroll for smooth scrolling cause my <body> not to display entirely (i.e., some elements are hidden)?

1.5k Views Asked by Fewzi At 17 April 2025 at 16:11

I'm using locomotive-scroll library for smooth scrolling on my project. The scroll-container is on an html main tag (header and footer are not included). Everything is working except a part of the page is not displaying at the end (approximately the footer). I was searching in the CSS but I didn't find anything. Thanks.

Here is my markup :

<body>
<header role="banner">
    <nav class="header__menu link-effect" role="navigation" aria-label="header-menu">
        <a class="header__menu-item b-container" href="#0">
                <span class="menu-item b-menu">Menu</span>
        </a>
        <div class="header__menu-item">
                <a class="header__menu-item-logo" href="#"><svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg></a>
        </div>
        <a class="header__menu-item" href="/#contact">
                <span class="header__menu-item">Contact</span>
        </a>        
    </nav>
</header>
<div class="b-nav" role="navigation">
    <nav class="b-nav-wrapper">
        <div class="button">
            <a class="button-link" href="#">Catalogue</a>
        </div>
        <div class="button">
            <a class="button-link" href="#">En développement</a>
        </div>
        <div class="button">
            <a class="button-link" href="#">Le WIPP</a>
        </div>
        <div class="button">
            <a class="button-link" href="#">L'équipe</a>
        </div>
        <div class="button chateau">
            <a class="button-link" href="#">Festival de cinéma de Saint-Paul-Trois-Châteaux</a>
        </div>
    </nav>
</div>
<main role="main" id="scroll_container">
    <!--<nav class="full__menu" role="navigation" aria-label="menu-blocs">
    <?php
    wp_nav_menu( array(
        'theme_location' => "main_menu"
    ) );
    ?>
    </nav>-->
    <?php
    print_view();
    ?>

    <!--<aside>

        <?php get_sidebar(); ?>

    </aside>-->

</main>

<footer role="contentinfo">
    <div class="footer-wrapper">
        <div class="footer__logo">logo-picto</div>
        <div class="footer__copyright"><p>©2020-Bootstrap-Label - Tous droits réservés</p></div>
    </div>
</footer>

<?php wp_footer(); ?>

</body>

Original Q&A

There are 1 best solutions below

**Rok Benko** · Answer 1

Problem

This is the reason why you don't see HTML rendered as expected:

The data-scroll-container is on an HTML <main> tag (header and footer are not included).

The following will not work:

<body>
  <!-- Header --> 
  <header>Header</header>

  <!-- Main -->
  <main data-scroll-container>
    <div data-scroll-section>
      <h1 data-scroll>Hey</h1>
      <p data-scroll></p>
    </div>
    <div data-scroll-section>
      <h2 data-scroll data-scroll-speed="1">What's up?</h2>
      <p data-scroll data-scroll-speed="2"></p>
    </div>
  </main>

  <!-- Footer -->
  <footer>Footer</footer>
</body>

Solution

The data-scroll-container needs to be on an element that wraps all three parts (i.e., <header>, <main>, <footer>).

The following will work:

<body>
  <div data-scroll-container>
    <!-- Header -->
    <header data-scroll-section>Header</header>

    <!-- Main -->
    <main>
      <div data-scroll-section>
        <h1 data-scroll>Hey</h1>
        <p data-scroll></p>
      </div>
      <div data-scroll-section>
        <h2 data-scroll data-scroll-speed="1">What's up?</h2>
        <p data-scroll data-scroll-speed="2"></p>
      </div>
    </main>

    <!-- Footer -->
    <footer data-scroll-section>Footer</footer>
  </div>
</body>

Why does Locomotive Scroll for smooth scrolling cause my <body> not to display entirely (i.e., some elements are hidden)?

There are 1 best solutions below

Problem

Solution

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in LOCOMOTIVE-SCROLL

Trending Questions

Popular # Hahtags

Popular Questions