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