Stack Overflow
Stack Overflow

Questions tagged [react-scroll]

76 questions
10
votes
4 answers

react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link

I am making a single scroller page using React and want to navigate to a specific section of the page. In HTML we use an href and anchor tag to achieve this interaction. I found a React library called react-scroll but I do not know how to link each…
Kinan Alamdar
  • 437
  • 1
  • 6
  • 22
8
votes
2 answers

ref scrollIntoView does not work with behavior smooth on react

I am creating a component that will hold a dynamic list of elements and for styling reasons, I need to keep the title for each section in a sticky nav menu. As the user scrolls up and down the list of sections I need to apply styling rules and also…
Gareth Townsend
  • 119
  • 2
  • 8
4
votes
1 answer

How do I use react router and react scroll on the same button?

I want to use a react-router and a react-scroll on the same Nav link. If I am on the home page I want the button to have the react scroll behavior. If I am on a different page the button needs go back to the home page and then scroll to the…
Malek Hammad
  • 51
  • 2
3
votes
3 answers

How to hide the offcanvas navbar when selecting the links inside of it using react scroll?

Any idea on how to hide/back to its original state when selecting the links inside offcanvas using react scroll? Below is my code and also here is the sandbox code https://codesandbox.io/. App.js import React, { useState, useEffect } from…
clarkf
  • 547
  • 2
  • 10
  • 22
3
votes
1 answer

react trading view widget how to stop scroll on mouse wheel up down

[![enter image description here][1]][1]I am using react trading view widget my client requirement is that it should stop scrolling on fixed button press. I have used this approach but its stopped all mouse events i need just stop scrolling on chart…
Noman
  • 594
  • 1
  • 18
2
votes
1 answer

why does react-scroll not clickable

I was using Link to navigate to new page, now I made one page of all components and it's not doing anything on click. import React, { useState } from 'react' import cn from 'classnames' // import Link from 'next/link' import { Link } from…
Stas Gavrilov
  • 25
  • 4
2
votes
1 answer

Next js scroll event not calling on scroll?

useEffect(() => { document.addEventListener("scroll", ()=> { console.log('.................gotcha'); }); },[]); I am wanting to fire an event when user is scrolling. I have used…
Abdus Sattar Nishad
  • 135
  • 2
  • 9
2
votes
1 answer

Page won't scroll with react-scroll

It looks like there is no trigger at all when I click specific item in Navbar, at one point it kinda worked, url was at least changing when I click li, but now even that doesn't work. Beside this, I have also set the ID for each of the…
Jovan Belic
  • 21
  • 1
2
votes
2 answers

React scroll with redirect to other route path

I have a problem with my page that I build. There is main route path like "/" where is all page but there is also route path "/privacy" where you can go by clicking button "Privacy policy". Main navigation and footer with navigation are displaying…
hvma411
  • 349
  • 2
  • 17
2
votes
2 answers

Can't resolve 'react-horizontal-scrolling-menu/build/scrollMenu'

I have a react js code in a magento pwa app. It has a component called categoryList and I need to add a horizontal scroll menu for that category list. Following is my code const mapCategory = categoryItem => { const { items } =…
Sahan Thilakarathna
  • 399
  • 4
  • 19
2
votes
1 answer

Anchor Link Libraries not working at all in my React project

I have tried multiple anchor link libraries for ease of active classes in order to scroll to sections of my page when clicking through the nav bar. Using a normal anchor element, as in test snaps to the element with the…
Josh Bangle
  • 251
  • 3
  • 16
2
votes
2 answers

React Scroll - Using React Scroll to in NavBar to scroll to specific component

I'm trying to use react scroll in my navbar to be able to scroll to a specific Component when any of the nav elements are clicked. I've been trying to follow the code, but I can't seem to fully understand it. I found a good answer here How to scroll…
Tigiras
  • 47
  • 1
  • 9
1
vote
0 answers

Why isn't the "activeClass" being applied (i.e., "toggle-menu__active" not being added) when clicking on some items?

I'm currently working with the 'react-scroll' library and have utilized the methods activeClass="toggle-menu__active" and spy={true}. The intention behind this is to apply CSS styles from the class 'toggle-menu__active' when clicking on my items.…
Jorge Leonardo
  • 159
  • 15
1
vote
1 answer

Styling Issues with React-Scroll Link component in Navbar

I am having an issue with the Link component from the react-scroll library. I am trying to achieve a simple hover effect on my navigation links, where they increase in size using transform: scale(1.1). However, this effect is not working. I've tried…
Scottsdaaale
  • 81
  • 7
1
vote
1 answer

how to route (navbar link) react website to another page specific element/component (like anchoring) with or without react-scroll

the website i am trying to author, has 2 pages page route path components details home '/' navbar,videgallery1,videogallery2,footer concepts '/concepts' navbar,imggallery1,imggallery2,footer Each page main component (video or image…
haseeb
  • 190
  • 3
  • 12
1
2 3 4 5