How to add unique scrolling effect?-CodePudding

I want to add scrolling effect like used in apple pages. How to do that using html css and javascript ? please tell me

CodePudding user response：

You can use the webkit to access the elements inside the browser and customize them at your own discretion.

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
    outline: none;
    border-radius: 10000px;
    overflow: hidden;
}

You can access this element using -webkit-scrollbar and design the scrollbar location using -webkit-scrollbar-track and design the scrollbar itself using -webkit-scrollbar-thumb.

Also, do not look for ready-made code inside the StackOverFlow, it is better to learn how to use it.

CodePudding user response：

You can easily use the wow js scrolling effect. Here is the link - https://www.delac.io/WOW/ Check out this is easy to use. Also there is many library and plugins for the scrolling effect- https://www.hongkiat.com/blog/scrolling-effects-js-libraries/