Html Question posted in
Some basic documentation can be found here.

Html – Scroll Jumping Up and Down When Attempted To Be Smooth

I’m trying to implement smooth scrolling for my entire page, but I’m experiencing an issue where the scrolling "snaps" up and down rather than moving smoothly. It seems to jump unpredictably instead of easing nicely as expected.

What I’ve Done:

I’ve added scroll-behavior: smooth in my global styles using styled-components.
I’ve set overflow-y: scroll for my main container to ensure scrolling works as intended.
I’ve made it important: scroll-behavior: smooth !important;

GlobalStyles.js:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  /* Apply box-sizing to all elements for better layout control */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Ensure smooth scrolling across the entire page */
  html {
    scroll-behavior: smooth !important;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.6;
  }

  /* Styles for the scroll container */
  #container {
    overflow-y: scroll;
  }

  /* Fixed positioning for the topTab with white text */
  .topTab {
    bottom: 0;
    position: fixed;
    font-size: 25px;
    color: white;
  }

  /* Styling for page sections */
  .pg {
    font-size: 100px;
    height: 100vh;
    background-color: blue;
    text-align: center;
  }

  /* Styling for links */
  a {
    color: white;
    text-decoration: none;
  }
`;

export default GlobalStyles;

Video of the problem attached here: https://streamable.com/0ykmf5

Tags:

2

Answers


  1. 0

    It looks like the issue might be coming from the overflow-y: scroll property, which forces the scrollbar to always be visible, even if it’s not needed. Instead, try switching it to overflow-y: auto. This way, the scrollbar will only appear when the content actually overflows, which should help with the snapping.

    Also, check if you’re using !important on scroll-behavior. Sometimes it can cause issues by overriding other styles. Try removing !important and see if that makes a difference.

    Login or Signup to reply.
  2. 0

    It sounds like the "snapping" issue you’re seeing might be caused by a few elements that aren’t working well with scroll-behavior.

    You can try to remove overflow-y: scroll on #container: If the html element is already using scroll-behavior: smooth, adding overflow-y: scroll on another element can lead to conflicts or unwanted behavior. Try removing overflow-y: scroll from #container and let the page scroll naturally on the html element.

    const GlobalStyles = createGlobalStyle`
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth !important;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.6;
  }

  .topTab {
    bottom: 0;
    position: fixed;
    font-size: 25px;
    color: white;
  }
`;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search