I stumbled across this website and I like the scrolling features on it.
https://drhyman.com/get-started/
I noticed that the scroll is incredibly smooth and it gives a calming feeling since there are no jumps. It responds to my mouse wheel, arrow buttons, and spacebar with the same smooth scroll. Also, the side menu on larger displays has a lovely smooth scrolling inertia curve to anchor links that I'm assuming is related.
I tried digging into the code and I'm fairly sure that it's not a CSS property and doing a control-F on scroll and parallax in the JS file showed results but there are so many references I am not sure which one controls this functionality or how I could replicate it in my own projects. I'm aware that he's using Wordpress and Jquery from the source files. No doubt it's a plugin of some sort and with some digging on StackOverflow I found Jquery Smooth Scroll (https://github.com/nathco/jQuery.scrollSpeed). However, their demo site (https://code.nath.co/scrollSpeed) is horribly jumpy and not at all smooth. I also found this demo (http://jsfiddle.net/36dp03ur/)
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle(delta) {
var time = 1000;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time );
}#myDiv {
height:2000px;
width:100px;
background-color: #CCF;
font-family: 'Trebuchet MS';
font-size: 12px;
line-height: 24px;
padding: 5px;
margin: 5px;
overflow:hidden;
}
.boldit{font-weight:bold;}<div id=myDiv>
Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class=boldit>Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>But it's also jumpy and doesn't respond to arrow or spacebar keys. All of this browsing is done in Chrome v83.0.4103.61 on Windows 10.
I'm hoping someone with a bit more experience can point out the code on his website that's making this work and direct how I could replicate this in my own project.
