react-scroll alongside css scroll-snap api

[ghost]

Hi,

I built a demo application that uses react-scroll and it worked fine. To improve the UX I tried to implement the css scroll-snap api to make scrolling even better. But I find out that the react-scroll smooth scrolling effect doesn't work when the css scroll-snap is enabled.

App.js

import React from 'react';
import { Link } from 'react-scroll'
import './App.css';
export default () => {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="red" smooth spy offset={0} duration={500}>RED</Link></li>
          <li><Link to="green" smooth spy offset={0} duration={500}>GREEN</Link></li>
          <li><Link to="blue" smooth spy offset={0} duration={500}>BLUE</Link></li>
        </ul>
      </nav>
      <div className="App">
        <div id="red" className="one" />
        <div id="green" className="two" />
        <div id="blue" className="three" />
      </div>
    </>
  );
}

App.css

html {
  scroll-snap-type: y mandatory;
}
.one {
  width: 100vw;
  height: 100vh;
  background-color: #f25;
  scroll-snap-align: start;
}
.two {
  width: 100vw;
  height: 100vh;
  background-color: rgb(34, 255, 89);
  scroll-snap-align: start;
}
.three {
  width: 100vw;
  height: 100vh;
  background-color: rgb(82, 34, 255);
  scroll-snap-align: start;
}
nav {
  scroll-snap-align: start;
}

[acollazomayer]

@y4553r did you find a solution for this?

[DanielBailey-web]

Any solution to this yet?

[cladjidane]

with the containerID attribute it works but the jump is abrupt. ~~If anyone has a solution to keep a smooth defilement?~~ EDIT : With the attribute scroll-behavior: smooth; the scrolling is smooth :)

<Link to="red" containerId="App" smooth spy offset={0} duration={500}>RED</Link>
...
<div id="App" className="App">
        <div id="red" className="one" />
        <div id="green" className="two" />
        <div id="blue" className="three" />
 </div>

[OSAMA263]

sup lads u can put this in ur css file html{ scroll-behavior: smooth; } works for me