Always scrolling in react js

[klawcodes]

does anyone know how to fix scrolls that are continuously downwards? even though it was fine before, I've tried to give the max height in the footer also stay the same. please help

this is the content of the App.js

import './App.css';
import FirstPage from './components/FirstPage/FirstPage'
import About from './components/About/About'
import Hero from './components/Hero/Hero'
import AboutMe from './components/AboutMe/AboutMe'
import Works from './components/Works/Works'
import Contact from './components/Contact/Contact'
import Footer from './components/Footer/Footer'
import LocomotiveScroll from 'locomotive-scroll';
import { useEffect, useRef } from 'react';

function App() {

  let container = useRef(null);

  useEffect(() => {
    new LocomotiveScroll({
      el: container,
      smooth: true,
      lerp: .07,
    });
  }, []);

  return (
    <div className="App container" ref={el => container = el}>
      <FirstPage data-scroll className="fp"/>
      <About data-scroll className="ab"/>
      <Hero data-scroll className="hr"/> 
      <AboutMe data-scroll className="abm"/>
      <Works data-scroll className="wrk"/>
      <Contact data-scroll className="ct"/>
      <Footer data-scroll className="ft"/>
    </div>
  );
}

export default App;

[ahmadou18]

i had the same problem in my nuxtjs project, i think you need to import the locomotive-scroll.css in your App.js and maybe it will work

[klawcodes]

when I import an error like this appears Module not found: Error: Can't resolve 'locomotive-scroll.css'

how to import it like this, isn't it?

import 'locomotive-scroll.css'

[ahmadou18]

try this import "locomotive-scroll/dist/locomotive-scroll.css";

[klawcodes]

it showing me blank screen right now and also give bunch of error in inspect console

[ahmadou18]

i think you need to create a locomitive-scroll.css and call him to your app.js like this example:

https://stackblitz.com/edit/react-locoscroll?file=src%2FApp.js

just copy the locomitive-scroll.css from this example and try it in you app 👌🏾

[ahmadou18]

the last version of locomitive-scroll.css https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.css

[klawcodes]

it works, but the scroll keeps scrolling down

[ahmadou18]

try this import locomotive-scroll/src/locomotive-scroll.scss

[klawcodes]

i don't know dude but this brings up another problem, now the scroll is to 2 and some of the html components are not visible, and when I click on one of the 1 component in the header it can't scroll up and can only go down continuously

and this is my header content

sorry dude for bothering you but I've tried to find a solution elsewhere, but didn't find the answer

import React, { useState } from 'react'
import './FirstPage.css'
import Bars from '../../images/bars.png'
import { Link } from 'react-scroll'

const FirstPage = () => {

  const mobile1 = window.innerWidth<=540 ? true: false;
  const [menuOpened, setMenuOpened] = useState(false)

  return (
    <div className="header">
      <h2 className="logo"><Link

      onClick={()=> setMenuOpened(false)}
      activeClass="active"
      to='home'
      spy={true}
      smooth={true}

      >klaw.</Link></h2>
      {menuOpened === false && mobile1 === true ? (
        <div className="bars" style={{backgroundColor: "#555", padding: ".7rem", borderRadius: "5px",}} onClick={() => setMenuOpened(true)}>
          <img src={Bars} style={{width: '1rem', height: '1rem'}}/>
        </div>
      ) : (
      <ul className="header-menu">
        <li className="h"><Link

        onClick={()=> setMenuOpened(false)}
        activeClass="active"
        to='home'
        spy={true}
        smooth={true}

        >HOME</Link></li>
        <li className="a"><Link

        onClick={()=> setMenuOpened(false)}
        activeClass="active"
        to='about'
        spy={true}
        smooth={true}

        >ABOUT</Link></li>
        <li className="w"><Link

        onClick={()=> setMenuOpened(false)}
        activeClass="active"
        to='works'
        spy={true}
        smooth={true}

        >WORKS</Link></li>
        <li className="c"><Link

        onClick={()=> setMenuOpened(false)}
        activeClass="active"
        to='contact'
        spy={true}
        smooth={true}

        >CONTACT</Link></li>
      </ul>
      )}
    </div>
  )
}

export default FirstPage

[wyking1997]

I am not sure if you solved you issue, but your tiket helped me to make the scolling work in my react application, so thank you!