Прокрутка Ползунка input[type=range] при достижении Div'a

var footer = document.getElementById("footer"); 
 
document.onscroll = function() { 
var top = footer.getBoundingClientRect().top; 
var heightScreen = document.documentElement.clientHeight; 
var g = top - heightScreen; 
if (g <=0){ 
	window.scrollBy(0, -footer.offsetTop); 
	//вы не сможете увидеть футер 
}  
}

body{ 
display: flex; 
flex-direction: column; 
justify-content: space-around; 
} 
 
div{ 
width: 50%; 
height: 400px; 
border: 1px solid; 
margin: 10px; 
}

<div>1</div> 
<div>2</div> 
<div>3</div> 
<div id="footer">Footer</div>

var input = document.getElementById("input"), 
 scrollHeight = document.documentElement.scrollHeight, 
 max = input.max, 
 min = input.min, 
 maxSection = max-min, 
 heightSection = scrollHeight/maxSection; 
 
document.addEventListener("scroll", changeInput) 
 
function changeInput(){ 
var value = input.value, 
	scrollTop = document.documentElement.scrollTop, 
	nowSection = Math.floor(scrollTop/heightSection); 
 	input.value = nowSection; 
}

body{ 
display: flex; 
flex-direction: column; 
justify-content: space-around; 
} 
 
div{ 
width: 100%; 
height: 400px; 
border: 1px solid; 
margin: 10px; 
} 
input{ 
position: fixed; 
top: 0; 
}

<input id="input" type="range" min="0" max="10" step="1" value="0"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div>