How to make such a scrollbar on the site?

  • 0
    How to make such a scrollbar?
    It is necessary that when scrolling, the scroll bar first partially changes in color, and then, when the user climbed onto the next block by more than half, the slider should smoothly crawl to the next part of the scroll.

    JavaScript Anonymous, Jul 5, 2020

  • 2 Answers
  • 0
    Present the designer with a servo pencil and ask them to draw a color picture :)

    This is to ensure that the designer must understand the principles of the web and not invent such things, so that later the developers do not suffer.

    Related - there is inverting colors, if the colors are really black and white, plus the ability to control the display of the scrollbar ... Maybe if you combine this, you can find a solution.

    There is a second option, JavaScript, i.e. program the color of elements, including this "transition" of the scrollbar. It's a difficult solution to describe in words, but in short, write your own scrollbar, make this slider as two elements of the same or different color, and depending on the scrolling change their size and color, you get a "transition" effect.

    Option # 3, again JavaScript, is a canvas implementation.

    Option # 4, and the best option, is to agree on the design changes.

  • 0
    1. Learn to work with the onscroll event. You cannot learn, you cannot write. Google event and how it works. Literally it has a number of scrolls.

    2. Learn to track the visible area. If the visible area is on block X - then give the color to the scroll 1, if the visible area is Y - give color 2.

    You won't learn to understand these things yourself, you will write shit)

    If you have any mistakes or questions, write here.

    I could have thrown a demo, but it's just not 5 minutes, I hope you understand.
    Benjamin Perkins

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!