We Keep Coding

How to find the visible text from a div

I want to find the text that is visible on screen from a div (i.e. that is not clipped by the scrollbar regions). Is there a way to see if a child node part is visible on screen?
I can't find anywhere to even find the node coordinates, let alone how to see coords of the word parts of a node.
function doTest() {
var elem = document.getElementById('mydiv');
var nodes = elem.childNodes;
for (var n = 0; n < nodes.length; n++) {
console.log(nodes[n].textContent + isNodeVisible(nodes[n]));
var words = nodes[n].textContent.split(' ');
for (var w = 0; w < words.length; w++) {
console.log(nodes[n].textContent + isNodeWordVisible(nodes[n], w));
if (w > 10) break; // give up
}
if (n > 100) break;
}
}
function isNodeVisible(node) {
return 'who knows';
}
function isNodeWordVisible(node, wordN) {
return 'who knows';
}
div {
margin: 20px;
border: solid 1px grey;
padding: 10px;
width: 200px;
height: 200px;
overflow: scroll
}
<div id='mydiv' onScroll='doTest()'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus
urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor
id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.Consectetur lorem donec massa sapien. Quis imperdiet
massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam.
A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque
id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus
magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet.
Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas
congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere
urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.Fusce ut placerat orci nulla. Suscipit adipiscing
bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Aenean et tortor at risus viverra adipiscing at. Nullam eget felis eget nunc
lobortis mattis aliquam faucibus. Orci dapibus ultrices in iaculis nunc sed. Etiam erat velit scelerisque in dictum non consectetur a. Morbi tristique senectus et netus et malesuada fames ac. Urna duis convallis convallis tellus id interdum velit. Nam
at lectus urna duis convallis convallis tellus id. Nullam eget felis eget nunc lobortis mattis aliquam. Faucibus turpis in eu mi bibendum neque. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Sed augue lacus viverra vitae congue.
Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Vel facilisis volutpat est velit. Dignissim diam quis enim lobortis scelerisque fermentum dui. Neque ornare aenean euismod elementum. At urna condimentum mattis pellentesque id.Massa
eget egestas purus viverra accumsan in nisl nisi. Arcu cursus vitae congue mauris. Phasellus faucibus scelerisque eleifend donec pretium. Odio facilisis mauris sit amet massa vitae. Amet commodo nulla facilisi nullam vehicula ipsum a. Est velit egestas
dui id ornare arcu odio. Enim lobortis scelerisque fermentum dui. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Morbi tristique senectus et netus et malesuada fames ac turpis. Nec tincidunt praesent semper feugiat nibh sed pulvinar.
Consequat semper viverra nam libero. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Dignissim suspendisse in est ante in nibh mauris cursus.Tellus in metus vulputate eu scelerisque. In massa tempor nec feugiat nisl pretium fusce id.
Eget velit aliquet sagittis id consectetur. Dictumst quisque sagittis purus sit. Eget sit amet tellus cras adipiscing enim. Non enim praesent elementum facilisis leo vel fringilla est. Aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque
id nibh tortor id aliquet lectus proin nibh. Imperdiet massa tincidunt nunc pulvinar sapien et. Leo integer malesuada nunc vel risus commodo. Feugiat sed lectus vestibulum mattis. Eu feugiat pretium nibh ipsum consequat nisl. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas.Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Nunc pulvinar sapien et ligula ullamcorper. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Erat imperdiet sed euismod nisi
porta lorem mollis. In vitae turpis massa sed elementum tempus egestas sed. Sit amet venenatis urna cursus eget nunc scelerisque viverra mauris. Tortor vitae purus faucibus ornare suspendisse. Eget magna fermentum iaculis eu non diam. Dui id ornare
arcu odio ut sem nulla pharetra. Viverra vitae congue eu consequat ac felis donec et odio. Aliquam sem et tortor consequat id porta nibh venenatis. Consequat semper viverra nam libero justo laoreet. Purus faucibus ornare suspendisse sed nisi lacus.
In arcu cursus euismod quis viverra. Tortor id aliquet lectus proin nibh nisl condimentum. Egestas congue quisque egestas diam in arcu. Sed risus ultricies tristique nulla aliquet enim tortor. Amet luctus venenatis lectus magna. Est placerat in egestas
erat imperdiet sed euismod.Leo integer malesuada nunc vel risus commodo viverra maecenas. Mi proin sed libero enim sed faucibus turpis. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Vel risus commodo
</div>
Any thoughts?

You can use the Intersection Observer API if you want to see when a element is visible or is intercepting another element:
const callback = (entries, observer) => {
entries.forEach((entry) => {
...
});
};
const observer = new IntersectionObserver(callback, {
root: null, // viewport
rootMargin: '0px',
threshold: 1.0
});
const target = document.querySelector('#mydiv');
observer.observe(target);

Ok - I think I've come up with a work around -
Insert some invisible tags (<a class='split'></a>) every 200 visible (non-tag) characters
Use a lazy-load technique to scan for the "splits" and ask if they are visible
Then using the knowledge of which splits are visible and which aren't I can guess which words are likely to be in the visible section of the container (within 200 characters).
function doAddSplits() {
var elem=document.getElementById('mydiv');
var intag=false;
var c;
var step=100;
var splitElemTx='<a class=\'split\'></a>';
var n=0;
elem.innerHTML=splitElemTx+elem.innerHTML;
for(var p=0; p<elem.innerHTML.length; p++) {
c=elem.innerHTML.substr(p,1);
if ( c=='<' ) intag=true;
else if ( c=='>' ) intag=false;
else {
n++;
if ( n>=step && !isAlphabetic(c)) {
elem.innerHTML=elem.innerHTML.substr(0,p)+splitElemTx+elem.innerHTML.substr(p);
p=p+splitElemTx.length;
n=0;
}
}
}
}
function doScrollDiv(){
var splits=document.getElementsByClassName('split');
var container=document.getElementById('mydiv');
for(var s=0; s<splits.length; s++){
removeClassName(splits[s],'onscreen');
if(isInViewport(splits[s], container)){
addClassName(splits[s],'onscreen');
}
}
}
function isInViewport(el, containerElem){
var rect = el.getBoundingClientRect();
var container = containerElem.getBoundingClientRect();
return (
rect.bottom >= container.top &&
rect.right >= container.left &&
rect.top <= (container.bottom) &&
rect.left <= (container.right)
);
}

call a resize event - that is not reacting on scroll?

I want a div to have the min-height of the viewport.
Therefor I use Javascript to detect the window height and set a style property (because of mobile browser height behavior).
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
I want to resize the height in case of orientationchange or if the browser window changes.
So, I created a resize event.
And here is my problem - the resize event also gets fired when you scroll the page.
So there is this ugly jump in the content on scrolling down.
Does anyone have a solution for this problem?!
It bothers me so often :(
Edit - here is a simple example:
var vpHeight = window.innerHeight;
// set style property
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
// do the same on resize
window.addEventListener('resize', () => {
var vpHeight = window.innerHeight;
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
});
* {
margin:0;
padding:0;
}
body {
background-color:salmon;
}
#fullheight {
width:100%;
background-color:lavender;
display:block;
position:relative;
height:var(--vpHeight, 100vh);
}
#fullheight::after {
content:'';
position:absolute;
bottom:0;
left:50%;
margin-left:-25px;
width:50px;
height:50px;
background-color:black;
}
<div id="fullheight"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.</p>
<p>Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique.</p>

It is not that a resize event is being called on every scroll, but there is actually a resize on the user scrolling at first on some mobiles, or subsequently when they go back to the first page top - it's the tabs at the top of the browser window that come and go - the reason 100vh doesn't 'work' as one would expect. This was done in the mobile browsers to stop a jump effect when doing 'ordinary' scrolling, but of course in this case the layout is altered depending on actual screen size usable.
One slight mitigation is to make the height change transition so it's less of a jerky experience. It's still feeling a bit different from a normal scroll without height change, but is less of an annoyance I think.
(Note, the phenomenon isn't seen on an SO snippet, run this code in your browser on an actual device).
<style>
* {
margin:0;
padding:0;
}
body {
background-color:salmon;
}
#fullheight {
width:100%;
background-color:lavender;
display:block;
position:relative;
height:var(--vpHeight, 100vh);
transition: height 0.3s; /* ADDED */
}
#fullheight::after {
content:'';
position:absolute;
bottom:0;
left:50%;
margin-left:-25px;
width:50px;
height:50px;
background-color:black;
}
</style>
<div id="fullheight"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.</p>
<p>Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique.</p>
<script>
var vpHeight = window.innerHeight;
// set style property
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
// do the same on resize
window.addEventListener('resize', () => {
var vpHeight = window.innerHeight;
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
});
</script>

Wrap a div around multiple paragraph elements of certain height/lines

I have a div of a fixed width: 580px which can contain paragraph elements of different counts (can be 10, can be 100). Each paragraph will have contents/text of a few hundred words.
What I want to achieve is to wrap the p elements around a div (with a class) after certain lines of text. Here is what I have done so far and cannot figure out a way to identify the start/end of the wrap.
It would also help if there is a way to count lines that are "not" in p elements. For example, the div lipsum has an additional span or other divs, what will be an approach to handle that?
function Wrap() {
var heightCount = 0;
$("#lipsum p").each(function() {
heightCount += $(this).height();
if (heightCount > 500) {
console.log('reached 500');
//wrap code here for e.g.
//<div class="test">...[p elements with proper closing tags that are under 500 in line]...</div>
heightCount = 0;
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" onclick="Wrap()">Test</button>
<div id="lipsum" style="width:580px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo
at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales,
ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia
efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus.
</p>
<p>
Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc.
</p>
<p>
In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et
dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque.
</p>
<p>
Nulla efficitur bibendum nunc, in efficitur nisi vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque purus purus, molestie id dignissim id, consequat a diam. Aliquam dictum eget purus et lobortis.
Vivamus vitae blandit quam. Suspendisse quis enim posuere leo aliquam faucibus in quis diam. Nullam efficitur aliquam velit vel feugiat. Aenean at porttitor neque. Nam egestas ullamcorper nisl, quis aliquam ligula convallis sed. Donec et dui lectus.
Ut dictum sapien nec dolor convallis tincidunt. Vivamus ut neque sed ligula lacinia mollis. Integer turpis dolor, fringilla quis orci at, finibus lacinia urna. Morbi rutrum lobortis finibus. Cras fringilla scelerisque elit vitae vehicula.
</p>
<p>
Cras dignissim mollis magna, a viverra ante dignissim et. Vivamus malesuada neque eget arcu ultricies, non feugiat metus laoreet. Praesent rutrum gravida dolor sed fringilla. Sed at orci nec neque bibendum feugiat. Vivamus tincidunt ex nunc, ac efficitur
nibh pharetra placerat. Vestibulum mi lorem, imperdiet vitae dictum tincidunt, pellentesque a diam. Etiam vestibulum dolor sit amet gravida elementum. Duis consectetur nunc lectus.
</p>
<p>
Maecenas mi elit, lobortis nec lectus nec, accumsan pulvinar est. Duis metus ipsum, fermentum a tortor nec, lobortis commodo est. Ut lacinia magna a tellus feugiat, ac tincidunt ligula ultricies. Nam congue turpis et leo laoreet porttitor. Donec luctus
eget nibh vel ultricies. Aliquam erat volutpat. Mauris vitae sapien id massa faucibus venenatis ac porttitor quam. Morbi eu ligula nec felis pharetra tempor.
</p>
<p>
Vivamus ultrices vel augue sed aliquet. Praesent egestas nulla vel bibendum auctor. Vivamus varius nunc in metus aliquet, sit amet fermentum dui rutrum. Pellentesque volutpat quis nulla ut sodales. Duis eu pulvinar leo. Nam venenatis aliquam orci ac accumsan.
Vivamus sollicitudin a nulla in facilisis. Pellentesque eget lectus gravida tortor porta molestie in et ligula. Phasellus sed lacus nisi.
</p>
<p>
Nulla augue sem, tempor quis mauris vel, accumsan accumsan odio. Aliquam faucibus pharetra velit aliquet placerat. Mauris posuere suscipit quam non venenatis. Sed hendrerit dolor sit amet ligula consequat tempor. Sed vel luctus magna. Duis bibendum ex
in odio aliquam, mattis consequat mi sodales. Morbi iaculis placerat purus, eu tincidunt purus gravida ac. Fusce sed mi lectus. Nulla orci quam, elementum vitae lacus eleifend, vulputate vehicula purus. Integer metus erat, imperdiet vitae viverra
nec, ultricies et est. Vestibulum auctor leo at euismod ullamcorper. Sed feugiat justo vel ipsum molestie, at sagittis lectus finibus. Morbi a augue turpis. Vestibulum nec erat nec eros vehicula tincidunt.
</p>
<p>
Proin iaculis, lectus elementum ornare tempor, metus turpis fringilla metus, eu bibendum ligula sapien eget ligula. Etiam sit amet laoreet velit. Phasellus et imperdiet orci. Sed vestibulum dictum tellus vitae ultrices. Suspendisse varius nulla eu mi
semper, vitae molestie nunc auctor. Ut tempus tincidunt luctus. Sed tempus metus odio, ut eleifend magna venenatis nec. Quisque aliquet diam mi, vel porttitor tortor congue eget. Proin elementum felis id risus maximus finibus. Fusce sed volutpat risus.
Nunc ornare laoreet dolor at vulputate. Ut mauris sapien, aliquam commodo metus et, accumsan varius erat. Nunc condimentum tortor at velit interdum, et iaculis neque vulputate.
</p>
<p>
Aliquam non consectetur risus. Integer quis quam id eros malesuada pulvinar. Sed vitae orci auctor, aliquet odio sit amet, ornare risus. In hac habitasse platea dictumst. Pellentesque dapibus semper ipsum, eget cursus arcu iaculis in. Quisque efficitur
nunc dui. Sed posuere sodales mauris, ac iaculis sem malesuada ut. Vivamus quis magna in libero suscipit scelerisque pellentesque commodo urna. Pellentesque quis purus maximus, scelerisque lacus vitae, facilisis urna. In hac habitasse platea dictumst.
Suspendisse quis aliquam arcu. Vivamus maximus pulvinar lacus vitae suscipit. Donec iaculis dictum ante, ut scelerisque enim pulvinar ac. Curabitur egestas eget elit ac sagittis. Nunc nec enim viverra, lobortis nunc non, pellentesque mauris.
</p>
</div>
UPDATE:
With the help of solution provided by #ControlAltDel I was able to modify the original Wrap function to fulfill my requirements by using wrapAll in the following two ways:
function Wrap() {
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var startHeight = 0;
//var firstDivP = 0;
const pageHeight = 200;
for (var i = 0; i < p.length; i++) {
$(p[i]).addClass("wrapthis");
if ($(p[i]).offset().top > startHeight + pageHeight) {
$(".wrapthis").wrapAll("<div class='main'></div>")
//lastDivP = i;
startHeight = $(p[i]).offset().top;
$(p).removeClass("wrapthis");
}
}
}
And:
function Wrap() {
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var heightCount = 0;
for (var i = 0; i < p.length; i++) {
$(p[i]).addClass("wrapthis");
heightCount += $(p[i]).height();
if (heightCount > 230) {
$(".wrapthis").wrapAll("<div class='main'></div>")
$(p).removeClass("wrapthis");
heightCount = 0;
}
}
}
I think this can further be improved but I got the results that I wanted.

Like I said, height is much easier. You can just get the offsets of your p's
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var startHeight = 0;
var firstDivP = 0;
const pageHeight = ...;
for (var i = 0; i < p.length; i++) {
if ($(p[i]).offset().top > startHeight + pageHeight) {
//put a div around the preceeding paragraphs. this means from firstDivP to i - 1
firstDivP = i;
startHeight = $(p[i]).offset().top;
}
}
This is actually much better than counting lines (in my opinion :)), as you cannot put half of a paragraph in a div.

scrollTo speed/duration setting

Is there a way to speed up the behavior speed of scrollTo?
I had a stab in the dark at speed and duration but don't work!
window.scrollTo({
top: 1000,
behavior: "smooth"
});
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Live example solution with pure javascript below:
// Bind your button click, scroll direction and effect speed
document.getElementById("btn-go-top").onclick = function () {
// Check if it's really on the floor
if(document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight === 0) {
scrollTo(0, 13000);
}
}
// Check if it's really at the top
document.getElementById("btn-go-floor").onclick = function () {
if(document.documentElement.scrollTop === 0) {
scrollTo(document.documentElement.scrollHeight-document.documentElement.clientHeight, 4269);
}
}
/*--------------------------------------------
Functions to make scroll with speed control
---------------------------------------------*/
// Element or Position to move + Time in ms (milliseconds)
function scrollTo(element, duration) {
var e = document.documentElement;
if(e.scrollTop===0){
var t = e.scrollTop;
++e.scrollTop;
e = t+1===e.scrollTop--?e:document.body;
}
scrollToC(e, e.scrollTop, element, duration);
}
// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
if (duration <= 0) return;
if(typeof from === "object")from=from.offsetTop;
if(typeof to === "object")to=to.offsetTop;
// Choose one effect like easeInQuart
scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}
function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
if (t01 < 0 || t01 > 1 || speed<= 0) {
element.scrollTop = xTo;
return;
}
element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;
setTimeout(function() {
scrollToX(element, xFrom, xTo, t01, speed, step, motion);
}, step);
}
/* Effects List */
function linearTween(t){
return t;
}
function easeInQuad(t){
return t*t;
}
function easeOutQuad(t){
return -t*(t-2);
}
function easeInOutQuad(t){
t/=0.5;
if(t<1)return t*t/2;
t--;
return (t*(t-2)-1)/2;
}
function easeInCuaic(t){
return t*t*t;
}
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
function easeInOutCuaic(t){
t/=0.5;
if(t<1)return t*t*t/2;
t-=2;
return (t*t*t+2)/2;
}
function easeInQuart(t){
return t*t*t*t;
}
function easeOutQuart(t){
t--;
return -(t*t*t*t-1);
}
function easeInOutQuart(t){
t/=0.5;
if(t<1)return 0.5*t*t*t*t;
t-=2;
return -(t*t*t*t-2)/2;
}
function easeInQuint(t){
return t*t*t*t*t;
}
function easeOutQuint(t){
t--;
return t*t*t*t*t+1;
}
function easeInOutQuint(t){
t/=0.5;
if(t<1)return t*t*t*t*t/2;
t-=2;
return (t*t*t*t*t+2)/2;
}
function easeInSine(t){
return -Math.cos(t/(Math.PI/2))+1;
}
function easeOutSine(t){
return Math.sin(t/(Math.PI/2));
}
function easeInOutSine(t){
return -(Math.cos(Math.PI*t)-1)/2;
}
function easeInExpo(t){
return Math.pow(2,10*(t-1));
}
function easeOutExpo(t){
return -Math.pow(2,-10*t)+1;
}
function easeInOutExpo(t){
t/=0.5;
if(t<1)return Math.pow(2,10*(t-1))/2;
t--;
return (-Math.pow(2,-10*t)+2)/2;
}
function easeInCirc(t){
return -Math.sqrt(1-t*t)-1;
}
function easeOutCirc(t){
t--;
return Math.sqrt(1-t*t);
}
function easeInOutCirc(t){
t/=0.5;
if(t<1)return -(Math.sqrt(1-t*t)-1)/2;
t-=2;
return (Math.sqrt(1-t*t)+1)/2;
}
html {
padding: 26px;
}
body {
margin: auto;
max-width: 690px;
border: 8px solid whitesmoke;
}
h1, h2 {
font-size: 22.5px;
text-align: center;
}
img {
margin: auto;
display: block;
width: 526px;
}
div {
margin: 69px;
text-align: justify;
}
center {
margin: 26px;
}
button {
font-size: 13px;
min-width: 269px;
padding: 8px;
font-weight: bold;
cursor: pointer;
border-radius: 13px;
border-style: ridge;
background: #ffeb00e0;
}
<center>
<button id="btn-go-floor" type="button">Click & Go FAST to the FLOOR!</button>
</center>
<h1>Pure JavaScript NewsPaper</h1>
<img src="https://miro.medium.com/max/700/0*oYERjNNFMUQoiKJt.png"/>
<h2>Scroll Direction & Speed Control with pure JavaScript</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem mauris, lobortis sit amet ex ac, eleifend vestibulum ante. Mauris tincidunt, nunc interdum porttitor euismod, risus elit consectetur ligula, id fringilla erat sem eu neque. Integer tellus mi, vulputate condimentum ipsum vel, mollis dignissim dui. Nunc non ante odio. Maecenas id purus aliquam, ultrices lorem vel, vulputate tortor. Phasellus ut elementum felis, vel posuere sapien. Curabitur luctus leo quam, a mollis justo dignissim vitae. Integer venenatis elit et justo congue porta ut eu nisi.</p>
<p>Fusce quis quam non magna hendrerit tempus ut eget diam. Nunc posuere convallis magna, eu rhoncus leo aliquam id. Integer vestibulum in purus quis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus tortor. Quisque ante elit, tristique quis magna eu, blandit porttitor ex. In suscipit dui at urna ullamcorper finibus. Vivamus porttitor felis lectus, ultricies dignissim ex tristique a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce venenatis diam et leo feugiat elementum. Aliquam pulvinar lobortis sapien non ultricies. Maecenas aliquam ipsum eget sem congue lobortis.</p>
<p>Maecenas feugiat vitae quam quis facilisis. In sit amet nisi ut est ultricies porttitor. Pellentesque tortor erat, congue at odio sit amet, pharetra lacinia mi. Sed ac massa magna. Curabitur rhoncus dignissim ex, at tempus lacus molestie vel. Sed maximus quam in sagittis tincidunt. Aliquam erat volutpat. Nulla at justo sapien. Duis accumsan diam sed tempus mattis. Fusce eu neque venenatis, interdum justo in, blandit ante. Integer ut ante nibh.</p>
<p>Etiam iaculis purus sollicitudin ornare eleifend. Duis tincidunt, sem quis dapibus molestie, arcu ipsum tristique diam, commodo suscipit sapien lacus et eros. Ut sed posuere augue. Nam quis elit tristique odio fermentum ultricies id eu turpis. Morbi pellentesque congue nisl sed blandit. Sed sed nibh arcu. Curabitur quis risus at tortor tristique porttitor eget dapibus tellus. Cras elit eros, sollicitudin sed tempus dictum, consequat vel nulla. Nulla ac turpis non erat suscipit semper ut in enim. Nam feugiat erat eu neque semper aliquet. Suspendisse augue dui, venenatis eu metus in, ultricies varius ante. Sed magna ligula, lobortis nec interdum sed, ornare sed risus. Fusce venenatis euismod tortor, non vestibulum ligula placerat sit amet. Nullam placerat risus ut libero semper, vitae lobortis tortor pharetra. Quisque in ex in ante egestas imperdiet a eu ligula.</p>
<p>Vivamus sit amet enim at ligula elementum interdum. Integer imperdiet neque luctus, convallis lacus a, consectetur turpis. Aenean rhoncus sodales diam, non elementum augue fermentum sed. Cras eu dui quis dolor finibus laoreet. Vestibulum ut nisl venenatis, imperdiet leo sit amet, mollis nisi. Ut venenatis magna et nisl tincidunt, at porta ante sodales. Nullam dignissim viverra massa eu faucibus. Cras diam nisl, dignissim nec euismod non, iaculis id mauris. Cras sed ex vitae nibh ornare tempor aliquet quis leo.</p>
<p>Aliquam a placerat velit, at semper dui. Praesent sed odio in sem ultrices tincidunt et nec nulla. Sed sed auctor neque. Nunc ultricies erat malesuada erat rutrum, placerat convallis lacus luctus. Morbi sit amet ligula quis purus varius commodo posuere euismod sem. Donec vestibulum sollicitudin dui, sit amet dapibus urna consectetur vel. Integer congue dui id elit consectetur, vitae lobortis turpis gravida.</p>
<p>Cras ut mauris interdum, pulvinar justo ut, elementum diam. Fusce feugiat dolor malesuada, imperdiet justo ac, convallis magna. Pellentesque et libero ac diam efficitur pulvinar sed vitae erat. Praesent id placerat quam. Praesent consectetur turpis mauris, ut rutrum elit malesuada egestas. Donec volutpat eu augue vel sollicitudin. Sed egestas scelerisque lobortis. Praesent venenatis faucibus risus. Ut semper malesuada nibh vel facilisis. Phasellus lobortis faucibus velit, nec viverra arcu cursus sed. Cras fringilla eros velit, eget molestie velit tempor vel. Aliquam consectetur suscipit orci, ut tristique nibh commodo nec. In sollicitudin dignissim mi vel rutrum. Mauris elementum, dolor quis cursus aliquet, urna sapien pharetra mi, nec egestas ligula risus quis felis. Nam consectetur est in quam gravida dictum. Sed at nisi aliquet, mollis mi eget, gravida neque.</p>
<p>Nulla est massa, fringilla vitae consequat in, congue eget purus. Etiam et erat lacus. Nulla interdum, lorem vel eleifend hendrerit, ex elit hendrerit elit, vitae auctor leo nisl vehicula dolor. Nullam porttitor odio turpis, tempus commodo tellus lacinia aliquet. Mauris malesuada ut tellus vel maximus. Quisque ut venenatis nulla. Etiam scelerisque suscipit pretium. Aliquam sed dapibus nibh. Pellentesque varius, enim ut facilisis ultrices, ipsum libero dignissim velit, eu sollicitudin orci tellus rhoncus ante. Nunc sed egestas ex, vel consectetur quam. Nullam at dignissim ante, ut hendrerit purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit a dolor et tincidunt. Cras eros diam, laoreet in mattis eget, luctus in lorem. Ut eget massa dictum, facilisis libero sit amet, feugiat tortor.</p>
<p>Donec vehicula a orci in lacinia. Fusce sed tellus non erat vulputate aliquam et gravida odio. Proin at mauris facilisis ex eleifend ullamcorper. Proin ultrices vehicula eros, quis viverra orci hendrerit ultricies. Aliquam blandit sagittis felis porttitor aliquet. Cras sollicitudin pharetra pulvinar. Quisque et ipsum magna. Aliquam aliquet eros eget ligula dignissim aliquet. Vivamus interdum velit et sem ultricies facilisis. Quisque felis ipsum, laoreet sit amet est ut, molestie tristique tortor. Duis sapien neque, pharetra eget malesuada nec, porta tempor velit. Vestibulum non lobortis erat. Proin non orci augue. Donec ultrices tincidunt dolor, sit amet commodo est.</p>
<p>Mauris ut venenatis orci. Maecenas eget justo dui. Vestibulum ut dolor vulputate, tincidunt velit vel, consectetur neque. Sed erat odio, condimentum sed sollicitudin eu, tincidunt quis urna. Pellentesque ut porta sapien. Maecenas semper sagittis mi sed consectetur. Ut lorem erat, lacinia nec tellus id, imperdiet dictum purus. Aenean malesuada vitae eros ut vulputate. Donec sapien metus, sollicitudin ut tellus vitae, condimentum consectetur eros. Integer eu odio leo. Proin ultricies, purus quis dignissim eleifend, lectus odio ullamcorper est, id accumsan nibh risus sed dolor. Fusce non dolor eu ligula mattis dignissim non id risus. Praesent at erat dui. Mauris mattis aliquam pretium.</p>
<p>Nulla at turpis in mauris venenatis dapibus. Etiam condimentum egestas congue. Vivamus posuere ornare nunc nec finibus. Ut ultrices neque eu diam aliquam iaculis eu non odio. Morbi tempus purus in felis tempor vestibulum. Morbi sed sapien pretium, maximus magna sed, feugiat felis. Fusce id lectus in tortor convallis porta eget sit amet massa. Fusce est ligula, pulvinar vitae elementum molestie, lobortis a elit. Sed a ligula urna. Integer pellentesque, tellus quis dignissim elementum, dui sem efficitur orci, et interdum massa ante at est. Vestibulum quis pulvinar quam. Curabitur sollicitudin, ipsum ut facilisis gravida, ex massa hendrerit orci, eu accumsan enim diam quis est.</p>
<p>In vehicula euismod rutrum. Nulla imperdiet magna vitae est sodales vestibulum. Praesent posuere justo ac mauris auctor ullamcorper. Ut rutrum magna id felis tincidunt dictum. Phasellus rhoncus condimentum enim in consequat. Mauris pulvinar velit libero, a rhoncus metus tincidunt vitae. Etiam efficitur eget diam pellentesque imperdiet. Ut efficitur ipsum a dui cursus egestas. Nulla id lacus pellentesque ex rutrum eleifend. Aliquam tincidunt egestas rhoncus.</p>
<p>Donec sit amet diam a arcu dignissim laoreet eu non augue. Nam bibendum eleifend sapien, eget luctus justo feugiat vel. Maecenas vitae consectetur ex, ut tempor urna. Donec elementum dictum laoreet. Curabitur eleifend lacus sed pretium commodo. Mauris arcu tellus, luctus eget pretium fermentum, ornare at libero. Praesent rutrum, elit et eleifend iaculis, ligula sapien fermentum ex, vel accumsan arcu augue vel lorem.</p>
<p>Praesent ipsum dolor, auctor ac dolor at, facilisis aliquet tellus. Aenean gravida turpis at varius viverra. Nullam in massa ut mi luctus iaculis. Maecenas porta mauris nibh, ut facilisis sem ultricies eu. Suspendisse vestibulum luctus pellentesque. Duis accumsan risus ut risus iaculis malesuada. Praesent sodales risus at velit elementum, in dictum nunc tempus. Maecenas accumsan tempus enim, quis tristique turpis. Nullam efficitur rutrum tortor a facilisis. Cras pulvinar eu dolor et tincidunt. Sed maximus sodales imperdiet.</p>
<p>Pellentesque elementum tellus neque, quis luctus eros placerat nec. Aenean dictum ligula sed leo tempor molestie. Pellentesque rutrum molestie quam, ac maximus odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu efficitur nisi. Aliquam condimentum diam vel ligula volutpat, sit amet egestas ipsum condimentum. Aenean volutpat elit quis accumsan laoreet. Mauris elementum ultrices nisl, sit amet pretium elit. Mauris ut purus a ligula convallis auctor.</p>
<p>Ut ornare dolor at risus suscipit molestie. Nunc laoreet molestie justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ullamcorper sem tortor, vitae eleifend libero consequat quis. Cras congue dictum risus. Vivamus efficitur ullamcorper cursus. Nam et ipsum quis justo tempor ultricies vel ac sem.</p>
<p>Maecenas vel commodo erat. Nullam nec molestie est. Aenean eleifend semper arcu, in consequat augue ultricies sed. Nam vehicula dictum ligula, ac laoreet libero convallis in. Nunc in elit sit amet sem egestas feugiat. Aliquam sagittis consequat dolor. Praesent condimentum varius tortor et tincidunt. Nunc diam felis, varius et elementum non, bibendum at ex. Nam bibendum vulputate justo.</p>
<p>Aliquam sed urna ut massa convallis dignissim. Sed gravida imperdiet est, sed scelerisque libero maximus id. Fusce sit amet fermentum magna. Fusce congue, enim vel lacinia molestie, magna sem bibendum diam, vel sodales lectus ipsum in arcu. Vestibulum scelerisque, tellus a facilisis facilisis, ligula arcu bibendum eros, iaculis faucibus ex eros vel magna. Ut non convallis diam, ac venenatis nisi. Nunc vel velit quis diam placerat lacinia. Phasellus laoreet dapibus convallis. Nunc sit amet faucibus purus. Nulla et sapien enim. Vivamus quis sem non quam faucibus vulputate. Nam venenatis urna neque, sed gravida tellus eleifend nec. In tincidunt dui dignissim, auctor ipsum non, varius felis. Fusce vel fringilla nisl, et porttitor velit.</p>
<p>Curabitur augue massa, molestie ac nulla id, sagittis condimentum enim. In ullamcorper velit et sapien ornare, at bibendum lorem consectetur. Pellentesque ultrices felis quis dolor luctus, nec sagittis libero suscipit. Nunc consequat leo ut tincidunt pharetra. Sed pellentesque pharetra mauris. Aenean rhoncus massa odio, et porta neque pulvinar quis. Donec pharetra metus eget lorem malesuada molestie. Nam vel cursus lorem. Mauris dui elit, fermentum eu dapibus in, volutpat ut arcu. Nunc a porttitor felis, et tempus ligula.</p>
<p>Morbi vestibulum interdum elementum. Pellentesque purus erat, posuere ac finibus id, congue eu nibh. Vestibulum placerat metus non tortor gravida, interdum pellentesque metus tincidunt. In a dui vel lectus ornare laoreet. Etiam varius elit sit amet accumsan semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nec vestibulum est, a hendrerit ligula. Morbi nec congue sem. In at mattis orci, ut efficitur risus. Suspendisse nec luctus purus. Quisque convallis nunc nisl, non posuere dui sodales a.</p>
</div>
<img src="https://miro.medium.com/max/700/0*oYERjNNFMUQoiKJt.png"/>
<h2>Wait finish the scroll effect & Click in the button on the floor</h2>
<center>
<button id="btn-go-top" type="button">Click & Go SLOW to the TOP!</button>
</center>
Updated jsfiddle: https://jsfiddle.net/rafarolo/0zt14Lkv/ (Jun/2021)
Old link jsfiddle: https://jsfiddle.net/rafarolo/zwkesrxh/3/
Updated jsfiddle Minified: https://jsfiddle.net/rafarolo/7yj06xrk/1/
Old link jsfiddle minified version: https://jsfiddle.net/rafarolo/8orw7ak3/3/
Just change the second parameter from scrollTopTo function to refine your speed control:
// scroll to top (0) in 4 seconds e some milliseconds
scrollTo(0, 4269);
// Element to move, time in ms to animate
function scrollTo(element, duration) {
var e = document.documentElement;
if (e.scrollTop === 0) {
var t = e.scrollTop;
++e.scrollTop;
e = t + 1 === e.scrollTop-- ? e : document.body;
}
scrollToC(e, e.scrollTop, element, duration);
}
// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
if (duration <= 0) return;
if (typeof from === "object") from = from.offsetTop;
if (typeof to === "object") to = to.offsetTop;
scrollToX(element, from, to, 0, 1 / duration, 20, easeOutCuaic);
}
function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
if (t01 < 0 || t01 > 1 || speed <= 0) {
element.scrollTop = xTo;
return;
}
element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;
setTimeout(function() {
scrollToX(element, xFrom, xTo, t01, speed, step, motion);
}, step);
}
function easeOutCuaic(t) {
t--;
return t * t * t + 1;
}
Minified version:
// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);
var a=document.documentElement;
if(0===a.scrollTop){var b=a.scrollTop;
++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}
b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),
"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){
function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),
f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){t--;return t*t*t+1;}
Reference:
https://stackoverflow.com/a/23844067/5626568

Working solution using Promise:
function scrollDelay(ms) {
return new Promise(res => setTimeout(res, ms));
}
document.getElementById("slow-scroll-demo-button").onclick = async function() {
for (var y = 0; y <= 4200; y += 100) {
window.scrollTo({top: y, behavior: 'smooth'})
await scrollDelay(100)
}
}
Trick to introduce delay in scrolling:
Create an async function called scrollDelay() that spends time by calling a promise
Call the scrollDelay along with scrollTo in a for loop

Javascript- Background scrolling slower when there is more content on the webpage on different screen resolutions

I made a webpage and wanted to have the background move slower when scrolling, so that the whole background image is fully visible. When I add content to that webpage the total scrolling height changes. So I made a calculation that slows down the scrolling speed when there is more content.
It works when I tested it on my 1920x1080 screen.
When I tested it on different screen resolutions it did not work properly anymore. The background repeated itself on the top causing a weird transition. I tried to make changes to the calculations but I did not get it to work.
How can I prevent that transition from happening on other screen resolutions?
function calcParallax(tileheight, speedratio, scrollposition)
{
return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
window.onscroll = function() {
var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
var ground = document.getElementById('ground');
var body = document.body,
html = document.documentElement;
var webheight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
//10001 is the scroll length of page where you need a speedratio of 5.7 to see the full background image.
//This only works on 1920x1080
var speedratio = webheight * 5.7 / 10001;
//2670 is the height of the background image.
var groundparallax = calcParallax(2670, speedratio, posY);
ground.style.backgroundPosition = "0 " + groundparallax + "px";
};
};
body
{
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#ground {
background-repeat: repeat;
background-attachment: fixed;
}
.pageContentBox
{
margin-left: 170px;
margin-right: 170px;
background-color: rgba(57, 57, 57, 0.5);
}
.pageContent
{
margin-left: 50px;
margin-right: 50px;
color: white;
}
<body id='ground' background="https://i.imgur.com/Yljakhv.jpg">
<div class= pageContentBox align="centre">
<div class= pageContent align="centre">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et urna ultrices felis sagittis bibendum. Proin mattis faucibus augue. Aliquam eu erat ac orci pretium tempor sit amet eget ex. Fusce eget pharetra turpis. Ut tristique aliquet ligula, quis iaculis sem. Phasellus tempus imperdiet felis. Donec sit amet lacinia purus. In vitae tincidunt ante, nec feugiat odio. Integer ultrices sem sed finibus porttitor. Vestibulum egestas vehicula ultricies. Morbi vehicula urna ut ipsum sodales porta. Mauris turpis nisi, imperdiet eget feugiat vitae, hendrerit eu massa. Vestibulum luctus sit amet turpis at condimentum. Suspendisse in est ultrices, facilisis nisl vestibulum, sollicitudin justo. Curabitur ultricies malesuada purus eu viverra. Phasellus interdum venenatis porttitor.
Mauris fringilla vulputate iaculis. Nunc urna lectus, varius quis pharetra at, fringilla a erat. Maecenas mollis orci sed enim sagittis, sit amet dignissim nibh pellentesque. Vivamus laoreet ultrices urna, ut blandit enim. Ut volutpat arcu interdum mi placerat tempor. Sed placerat lacus lectus, vitae placerat neque scelerisque vitae. Morbi semper lobortis eros. Maecenas semper, magna ac fringilla rhoncus, est urna suscipit ante, bibendum sodales urna lectus id turpis. Vivamus semper justo sed ligula dictum, non scelerisque tortor consectetur. Integer metus tellus, posuere eget nisl ac, fermentum sodales diam. Nunc tincidunt laoreet mauris, sed pharetra nulla ultrices at. Curabitur vel est massa.
Donec eu imperdiet nulla. Pellentesque tristique semper congue. Pellentesque iaculis ut ligula quis efficitur. Fusce nec nisi pulvinar nisl suscipit pharetra. Nunc ac varius augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem augue, euismod a leo in, laoreet imperdiet magna. Etiam pellentesque eros magna, quis viverra nunc laoreet in.
Donec ut varius ante. Nunc tristique, tellus feugiat fringilla mattis, ante augue vehicula mi, at elementum massa nibh nec erat. Phasellus euismod, metus non vulputate imperdiet, ante lacus laoreet augue, ut condimentum tortor enim at augue. Donec congue et dolor vel maximus. Sed volutpat orci eget dui blandit, at laoreet nisl dapibus. Nunc vitae interdum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ipsum dui, bibendum ac faucibus mattis, pharetra id enim. Morbi faucibus ante id lacus consectetur, ut commodo neque molestie.
Pellentesque convallis blandit accumsan. Quisque non nunc ac massa venenatis blandit nec a nisl. Ut iaculis sagittis lectus. Donec ut porta nisi. Integer eget venenatis nibh. Nulla et interdum augue. Mauris non gravida nisi, et imperdiet ante. Cras convallis aliquam ullamcorper. Cras malesuada scelerisque justo, pretium sagittis quam dignissim quis. Curabitur tempus porta hendrerit. Morbi at varius risus. Proin elementum, erat nec auctor maximus, elit mauris accumsan dolor, et hendrerit nulla diam vitae quam. Aliquam malesuada sollicitudin arcu eu porta. Suspendisse eget massa massa. Curabitur et urna placerat, molestie justo in, mollis dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et urna ultrices felis sagittis bibendum. Proin mattis faucibus augue. Aliquam eu erat ac orci pretium tempor sit amet eget ex. Fusce eget pharetra turpis. Ut tristique aliquet ligula, quis iaculis sem. Phasellus tempus imperdiet felis. Donec sit amet lacinia purus. In vitae tincidunt ante, nec feugiat odio. Integer ultrices sem sed finibus porttitor. Vestibulum egestas vehicula ultricies. Morbi vehicula urna ut ipsum sodales porta. Mauris turpis nisi, imperdiet eget feugiat vitae, hendrerit eu massa. Vestibulum luctus sit amet turpis at condimentum. Suspendisse in est ultrices, facilisis nisl vestibulum, sollicitudin justo. Curabitur ultricies malesuada purus eu viverra. Phasellus interdum venenatis porttitor.
Mauris fringilla vulputate iaculis. Nunc urna lectus, varius quis pharetra at, fringilla a erat. Maecenas mollis orci sed enim sagittis, sit amet dignissim nibh pellentesque. Vivamus laoreet ultrices urna, ut blandit enim. Ut volutpat arcu interdum mi placerat tempor. Sed placerat lacus lectus, vitae placerat neque scelerisque vitae. Morbi semper lobortis eros. Maecenas semper, magna ac fringilla rhoncus, est urna suscipit ante, bibendum sodales urna lectus id turpis. Vivamus semper justo sed ligula dictum, non scelerisque tortor consectetur. Integer metus tellus, posuere eget nisl ac, fermentum sodales diam. Nunc tincidunt laoreet mauris, sed pharetra nulla ultrices at. Curabitur vel est massa.
Donec eu imperdiet nulla. Pellentesque tristique semper congue. Pellentesque iaculis ut ligula quis efficitur. Fusce nec nisi pulvinar nisl suscipit pharetra. Nunc ac varius augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem augue, euismod a leo in, laoreet imperdiet magna. Etiam pellentesque eros magna, quis viverra nunc laoreet in.
Donec ut varius ante. Nunc tristique, tellus feugiat fringilla mattis, ante augue vehicula mi, at elementum massa nibh nec erat. Phasellus euismod, metus non vulputate imperdiet, ante lacus laoreet augue, ut condimentum tortor enim at augue. Donec congue et dolor vel maximus. Sed volutpat orci eget dui blandit, at laoreet nisl dapibus. Nunc vitae interdum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ipsum dui, bibendum ac faucibus mattis, pharetra id enim. Morbi faucibus ante id lacus consectetur, ut commodo neque molestie.
Pellentesque convallis blandit accumsan. Quisque non nunc ac massa venenatis blandit nec a nisl. Ut iaculis sagittis lectus. Donec ut porta nisi. Integer eget venenatis nibh. Nulla et interdum augue. Mauris non gravida nisi, et imperdiet ante. Cras convallis aliquam ullamcorper. Cras malesuada scelerisque justo, pretium sagittis quam dignissim quis. Curabitur tempus porta hendrerit. Morbi at varius risus. Proin elementum, erat nec auctor maximus, elit mauris accumsan dolor, et hendrerit nulla diam vitae quam. Aliquam malesuada sollicitudin arcu eu porta. Suspendisse eget massa massa. Curabitur et urna placerat, molestie justo in, mollis dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et urna ultrices felis sagittis bibendum. Proin mattis faucibus augue. Aliquam eu erat ac orci pretium tempor sit amet eget ex. Fusce eget pharetra turpis. Ut tristique aliquet ligula, quis iaculis sem. Phasellus tempus imperdiet felis. Donec sit amet lacinia purus. In vitae tincidunt ante, nec feugiat odio. Integer ultrices sem sed finibus porttitor. Vestibulum egestas vehicula ultricies. Morbi vehicula urna ut ipsum sodales porta. Mauris turpis nisi, imperdiet eget feugiat vitae, hendrerit eu massa. Vestibulum luctus sit amet turpis at condimentum. Suspendisse in est ultrices, facilisis nisl vestibulum, sollicitudin justo. Curabitur ultricies malesuada purus eu viverra. Phasellus interdum venenatis porttitor.
Mauris fringilla vulputate iaculis. Nunc urna lectus, varius quis pharetra at, fringilla a erat. Maecenas mollis orci sed enim sagittis, sit amet dignissim nibh pellentesque. Vivamus laoreet ultrices urna, ut blandit enim. Ut volutpat arcu interdum mi placerat tempor. Sed placerat lacus lectus, vitae placerat neque scelerisque vitae. Morbi semper lobortis eros. Maecenas semper, magna ac fringilla rhoncus, est urna suscipit ante, bibendum sodales urna lectus id turpis. Vivamus semper justo sed ligula dictum, non scelerisque tortor consectetur. Integer metus tellus, posuere eget nisl ac, fermentum sodales diam. Nunc tincidunt laoreet mauris, sed pharetra nulla ultrices at. Curabitur vel est massa.
Donec eu imperdiet nulla. Pellentesque tristique semper congue. Pellentesque iaculis ut ligula quis efficitur. Fusce nec nisi pulvinar nisl suscipit pharetra. Nunc ac varius augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem augue, euismod a leo in, laoreet imperdiet magna. Etiam pellentesque eros magna, quis viverra nunc laoreet in.
Donec ut varius ante. Nunc tristique, tellus feugiat fringilla mattis, ante augue vehicula mi, at elementum massa nibh nec erat. Phasellus euismod, metus non vulputate imperdiet, ante lacus laoreet augue, ut condimentum tortor enim at augue. Donec congue et dolor vel maximus. Sed volutpat orci eget dui blandit, at laoreet nisl dapibus. Nunc vitae interdum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ipsum dui, bibendum ac faucibus mattis, pharetra id enim. Morbi faucibus ante id lacus consectetur, ut commodo neque molestie.
Pellentesque convallis blandit accumsan. Quisque non nunc ac massa venenatis blandit nec a nisl. Ut iaculis sagittis lectus. Donec ut porta nisi. Integer eget venenatis nibh. Nulla et interdum augue. Mauris non gravida nisi, et imperdiet ante. Cras convallis aliquam ullamcorper. Cras malesuada scelerisque justo, pretium sagittis quam dignissim quis. Curabitur tempus porta hendrerit. Morbi at varius risus. Proin elementum, erat nec auctor maximus, elit mauris accumsan dolor, et hendrerit nulla diam vitae quam. Aliquam malesuada sollicitudin arcu eu porta. Suspendisse eget massa massa. Curabitur et urna placerat, molestie justo in, mollis dolor.
</h1>
</div>
</div>

In browser all html rendering and executing javascript is running on main-thread so animation performance will degraded
(if you are using animation property that running on main-thread , also scrolling is affected by main-thread activity)
Always use animation property that are running on compositor-thread e.g transform, opacity so animation not will affected by main-thread, result in smooth animation effect.
see which property will running on compositor-thread or on main-thread cssTrigger
Read below articles before start working on animation.
Css-vs-Javascript
Animations-and-Performance
The-basics-of-Easing
Animating-between-Views