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)
);
}

How to delete a div that meets another div

I would like to be able to hide a div that meets another in JavaScript.
I found this code but I can't adjust the distance between the red and green div. I need to put a lot of content between the green div and the red div.
In this code the red div disappears when it comes into contact with the green one
window.onscroll = function() {
cacherHeader()
};
var header = document.getElementById("header");
var essai = document.getElementById("essai");
var position_essai = essai.offsetTop;
function cacherHeader() {
if (window.pageYOffset <= position_essai) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
height: 200px;
padding-top: 20px;
}
#essai {
background-color: green;
}
#conteneur_02 {
height: 1500px;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">conteneur 1</div>
<div id="essai">Essai</div>
<div id="conteneur_02">conteneur 2</div>

The code you use has nothing to do with "two divs meeting". The #header disappears when the window.pageYOffset is greater than the offsetTop of the #essai.
This means that you can have any length content between the two - it just simply updates the value when the #header classes are toggled.
I updated the snippet: removed the values that set the height of the containers from the CSS - now they stretch with the content.
Also, added a function to get the current offsetTop of an element - otherwise the values would be recalculated only on page refresh and not on if the window width (thus the container widths) changes.
window.onscroll = function() {
cacherHeader()
};
function getOffsetTop(el) {
return el.offsetTop
}
const header = document.getElementById("header");
const essai = document.getElementById("essai");
function cacherHeader() {
if (window.pageYOffset <= getOffsetTop(essai)) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
padding-top: 20px;
}
#essai {
background-color: green;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>
<div id="essai">Essai</div>
<div id="conteneur_02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>

jQuery to Javascript/Vue

I want to create a custom search box that can jump to its matches using mark.js mark.js web page.
They do have an example here:
https://jsfiddle.net/julmot/973gdh8g/
But it is written using jQuery.
I tried converting it to JS/Vue (using Quasar), but now I couldn't get it to work.
No errors, but also no highlights.
I have updated jQuery lines like:
$prevBtn = $("button[data-search='prev']")
to:
prevBtn = document.querySelector('#prev')
And these, I dont know how to convert the others, such as:
$nextBtn.add($prevBtn).on("click", function() {})
Here is my fiddle (simplified version, but not completely done yet, also make sure to click "Search" after input):
https://codepen.io/keechan/pen/JjWEYmP?editors=1111
What am I missing? Help please!

I rewrote their jQuery example using pure JavaScript.
You should be able to compare the two examples to see how the various jQuery functions translate to JavaScript and then implement them into your Vue project.
https://jsfiddle.net/75qyu3j8/
I tried to keep the variable names the same so it is easier to understand.
document.body.onload = function() {
// the input field
var $input = document.querySelector("input[type='search']"),
// clear button
$clearBtn = document.querySelector("button[data-search='clear']"),
// prev button
$prevBtn = document.querySelector("button[data-search='prev']"),
// next button
$nextBtn = document.querySelector("button[data-search='next']"),
// the context where to search
$content = document.querySelector(".content"),
$contentMark = new Mark($content),
// jQuery object to save <mark> elements
$results,
// the class that will be appended to the current
// focused element
currentClass = "current",
// top offset for the jump (the search bar)
offsetTop = 50,
// the current index of the focused element
currentIndex = 0;
/**
* Jumps to the element matching the currentIndex
*/
function jumpTo() {
if ($results.length) {
var position,
$current = $results[currentIndex];
$results.forEach($result => $result.classList.remove(currentClass));
if ($current) {
$current.classList.add(currentClass);
position = $current.offsetTop - offsetTop;
window.scrollTo(0, position);
}
}
}
/**
* Searches for the entered keyword in the
* specified context on input
*/
$input.addEventListener("input", function() {
var searchVal = this.value;
$contentMark.unmark({
done: function() {
$contentMark.mark(searchVal, {
separateWordSearch: true,
done: function() {
$results = $content.querySelectorAll("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
});
/**
* Clears the search
*/
$clearBtn.addEventListener("click", function() {
$contentMark.unmark();
$input.value = ""
$input.focus();
});
/**
* Next and previous search jump to
*/
$nextBtn.after($prevBtn);
function prevNextHandler() {
if ($results.length) {
currentIndex += (this.dataset.search === "prev" ? -1 : 1);
if (currentIndex < 0) {
currentIndex = $results.length - 1;
}
if (currentIndex > $results.length - 1) {
currentIndex = 0;
}
jumpTo();
}
}
$nextBtn.addEventListener("click", prevNextHandler);
$prevBtn.addEventListener("click", prevNextHandler);
};
mark {
background: yellow;
}
mark.current {
background: orange;
}
.header {
padding: 10px;
width: 100%;
background: #eee;
position: fixed;
top: 0;
left: 0;
}
.content {
margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="header">
Search:
<input type="search" placeholder="Lorem">
<button data-search="next">↓</button>
<button data-search="prev">↑</button>
<button data-search="clear">✖</button>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ullamcorper orci, eget porttitor justo. Aliquam id sollicitudin elit. Nulla in sodales ipsum. Donec vulputate venenatis magna. Vestibulum sit amet leo lacinia, cursus lectus in, gravida
metus. In ultricies sed tortor non pellentesque. Mauris quis tempor neque. Donec nec sagittis magna. Integer fringilla posuere metus eu mollis. Ut ac porta metus. Duis sed lacinia metus. Nunc malesuada iaculis risus vitae bibendum.
</p>
<p>
Vivamus posuere condimentum leo eu hendrerit. Pellentesque placerat iaculis ante a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu ipsum ac magna congue congue sed maximus tortor. Vivamus id odio elementum, vehicula nunc
ut, efficitur felis. Nullam hendrerit velit libero, gravida porttitor tortor ullamcorper eu. Ut ut lectus non enim sagittis aliquam quis in orci. Donec a arcu eu eros cursus cursus. Donec dictum dignissim tellus, dictum egestas purus pellentesque
sed.
</p>
<p>
Vestibulum eu ornare urna, nec aliquam lectus. Phasellus eu odio sapien. Vestibulum eu turpis at lorem sagittis posuere. Quisque tellus nunc, facilisis id lacus nec, ornare rhoncus elit. Vivamus vehicula eros a condimentum venenatis. Sed orci massa, pulvinar
sed erat nec, pellentesque suscipit leo. Mauris lobortis tincidunt nunc, sed tempus ex congue vitae. Curabitur lobortis mauris in ex malesuada, quis vehicula neque lobortis. Curabitur aliquam porttitor tellus eget tempus. Donec maximus tempus tristique.
Aliquam tincidunt odio dictum, scelerisque ipsum ut, facilisis quam. Ut nec malesuada neque.
</p>
<p>
Proin felis eros, tincidunt vitae scelerisque sit amet, dictum nec ante. Praesent tincidunt ac lacus nec elementum. Vivamus sed gravida purus, sed efficitur tortor. Nulla non molestie arcu. Sed tincidunt consectetur ligula sed lobortis. In non sapien
ac urna lacinia placerat sed nec lacus. Aenean lobortis tincidunt sapien a hendrerit. Quisque eu turpis accumsan nisl blandit efficitur.
</p>
<p>
Nam sit amet pellentesque est. Sed ligula turpis, ultricies sit amet mattis elementum, tristique non risus. Phasellus at congue ex. Proin nisi leo, vestibulum vitae accumsan in, imperdiet id dolor. Quisque at blandit nisl. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eget metus augue. Morbi faucibus venenatis sapien, fermentum porttitor felis pharetra a. Nam interdum nibh tortor, quis maximus turpis blandit eget. Praesent in feugiat neque, sed
vulputate quam. Curabitur erat quam, efficitur et congue quis, iaculis euismod libero. Quisque odio sapien, efficitur non mauris ac, tincidunt condimentum turpis.
</p>
<p>
Maecenas dapibus aliquam vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis viverra leo quis porta. Sed sit amet porttitor quam. Fusce nec risus non augue consectetur ultricies. Aliquam
elit lorem, tincidunt ac dolor vel, vulputate consectetur ex. In hac habitasse platea dictumst. Sed eget nisl aliquam, cursus odio nec, commodo lorem. Nulla mollis tortor eu odio rutrum vulputate. Donec condimentum molestie mauris, nec sodales nisi
volutpat aliquam. Nulla mollis libero sed nibh volutpat, ac mollis elit tincidunt. Vestibulum cursus velit vitae felis aliquam ultricies. Donec vehicula dictum feugiat. Vestibulum volutpat sollicitudin sagittis.
</p>
<p>
Aliquam consequat, diam eu ullamcorper porta, diam eros rhoncus turpis, in rutrum sem diam a risus. Duis lacinia velit sed ante feugiat venenatis. Aenean orci leo, dictum non finibus nec, dignissim quis eros. Nullam sit amet orci ac purus blandit commodo
sit amet eget neque. Sed pellentesque dictum tortor. Ut dui erat, tempus in odio in, aliquet convallis mi. Morbi efficitur justo ante, quis ultricies turpis suscipit ac. Sed sit amet nisl rutrum, laoreet mauris id, ullamcorper orci. In facilisis nisi
eget fringilla imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ut ultricies dui. Pellentesque elit urna, imperdiet sed congue eget, hendrerit sed urna.
</p>
<p>
Proin vel hendrerit nulla. Vivamus vehicula nibh nec lorem blandit, quis aliquam ipsum suscipit. Nulla at vestibulum felis. Aenean ac nibh eget enim molestie pulvinar. Duis nulla justo, tristique id nulla nec, faucibus imperdiet arcu. In vel pretium dui,
at lobortis sapien. Phasellus ullamcorper id enim eget dictum. Ut imperdiet rutrum est a rutrum. Curabitur eget dignissim tellus. Fusce tempus leo nisl, vitae auctor diam feugiat sit amet. Vestibulum accumsan justo eget odio imperdiet, consectetur
efficitur ex dapibus.
</p>
<p>
Sed pharetra odio a nibh pharetra rutrum. Suspendisse ut ullamcorper lectus. Donec ipsum mauris, congue et lobortis sit amet, ultricies ac tellus. Sed nisi risus, condimentum at varius quis, condimentum ac velit. In condimentum, magna sed ornare eleifend,
dolor nulla mollis felis, quis feugiat elit turpis non ipsum. Etiam aliquam est imperdiet dolor rutrum, at varius leo sodales. Morbi quis iaculis metus.
</p>
<p>
Maecenas auctor nec ligula ac luctus. Nam sit amet euismod mauris. Donec et diam sit amet eros efficitur tempor. Mauris non erat sit amet nunc interdum pulvinar. Sed luctus hendrerit justo eget pulvinar. Cras non arcu sed ligula faucibus pulvinar. Sed
egestas risus nisl. Duis quis arcu tempus, cursus erat ac, gravida enim. Cras et condimentum ante. Nullam eleifend egestas velit, quis semper est imperdiet non. Donec quis purus varius, placerat mi et, dictum lorem. Sed quis finibus nisi, vitae molestie
metus. Donec lobortis eros quis vestibulum vulputate.
</p>
</div>

Hide footer on independent column scroll down, appear on scroll up

I'm working on creating a two-column website; the two columns scroll independently. I need the footer to be hidden when the user scrolls down and to appear again once the user scrolls back up. I'm new to Javascript and I recently learned how to do this with a site that scrolls as a whole. I've already browsed through questions of that nature here too, however I'm having trouble trying to apply that to the independent columns. I got the footer to hide on scroll down of the left column, but I can't get it to reappear when scrolling up. I've put together an example of what I have. Any help would be much appreciated.
var prevScrollpos = document.getElementById("left").pageYOffset;
document.getElementById("left").onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}
body {
margin: 0;
background-color: darkgreen;
font-family: Arial, Helvetica, sans-serif;
border-top: 9px solid #f8f25c;
}
p{
padding: 10px 20px 10px 25px;
}
#content, html, body {
height: 99%;
}
#left {
float: left;
width: 50%;
background: #fdfef9;
height: 100%;
overflow: scroll;
}
#right {
float: left;
width: 50%;
background: #4668ff;
height: 100%;
overflow: scroll;
}
#navbar {
background-color: orangered;
position: fixed;
bottom: 0;
width: 100%;
display: block;
transition: bottom 0.3s;
}
#navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
text-decoration: underline;
color: black;
}
<body>
<div id="navbar">
Home
Services
Contact
</div>
<div id="content">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
</div>
</body>

Please try this:
var prevScrollpos = document.getElementById("left").scrollTop;
document.getElementById("left").onscroll = function () {
var currentScrollPos = document.getElementById("left").scrollTop;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}

How to get the exact smooth scrolling functionality of Chrome?

When the user clicks a button on my page it creates a new element below it and then scrolls downwards towards it. I'd like this to be done smoothly, and that can be accomplished like so:
window.scroll({ top: document.body.scrollHeight, behavior: "smooth" });
However, this does not work on Safari, so it appears that I need to use a custom function instead to get this functionality.
I searched around and found this (current answer, but suboptimal):
doScrolling = (elementY, duration) => {
let startingY = window.pageYOffset;
let diff = elementY - startingY;
var start;
// Bootstrap our animation - it will get called right before next frame shall be rendered.
window.requestAnimationFrame(function step(timestamp) {
if (!start) { start = timestamp; }
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
// Get percent of completion in range [0, 1].
let percent = Math.min(time / duration, 1);
window.scrollTo(0, startingY + diff * percent);
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) { return; }
// Proceed with animation as long as we wanted it to.
if (time < duration) {
window.requestAnimationFrame(step);
}
})
}
Called like: this.doScrolling(document.body.scrollHeight, 750);
Which seems to work, but it doesn't seem to have the same semantics as window.scroll.
For one, you need to specify a duration, whereas with window.scroll it's implied.
Secondly, it seems as if window.scroll uses a different transition type? It's hard to tell, but it feels more like an ease as opposed to a linear transition, where it starts off slow, then goes fast, and then slows to a stop.
Is it possible to modify the above function to mimic the exact semantics of window.scroll such that you can't tell the difference between calling the two?
To clarify, I don't need to clone all the functionalities of window.scroll. The only thing I require is the ability to scroll to a given position (in my case it's always the end of the page) in a smooth manner. The function I provided above in my question is almost perfect, except that it's slightly janky and doesn't feel as smooth as window.scroll. I think it may be the animation style? It's kind of hard to tell why it looks "worse" since it's so fast.

You could try using AnimeJS
add <script src="path/to/anime.min.js"></script> to your HTML page
or via CDN at https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js
And then
doScrolling = (elementY) => {
const startingY = window.pageYOffset
const diff = elementY - startingY
const obj = {
pos: startingY
}
const anime({
targets: obj,
pos: startingY + diff,
round: 1,
easing: 'easeInOutQuad',
update: function() {
window.scrollTo(0, obj.pos)
}
}).play()
}

There was already an almost duplicate of this question (actually asking for what you need in a better way) that you should probably read.
You can't really write a script that does the same as the browser's implementations, because every browser has a different behavior.
Chrome for instance will ease in out the scrolling, i.e it will go slower at the beginning and the end of the animation, Firefox on the other hand uses a linear interpolation (a constant speed). Testing this accurately is near impossible.
But that's not a problem, because you don't need a script that does the same, you need a polyfill, which will add the missing feature only to the ones that need it, and let the original one of the browser that already support it.
So as pointed out in CDK's answer, there is a polyfill available, heavily tested and not too big (429 lines 11.1KB unminified with commments).
But I also did wrote a smaller version for that question, that fits here in about 100 lines:
/* Polyfills the Window#scroll(options) & Window#scrollTo(options) */
(function ScrollPolyfill() {
// Safari incorrectly goes through the "behavior" member
// making #nlawson"s solution failing there...
// so we go back to ugly CSS check
if (!('scrollBehavior' in document.documentElement.style)) {
attachPolyfill();
}
function attachPolyfill() {
var original = window.scroll, // keep the original method around
animating = false, // will keep our timer's id
dx = 0,
dy = 0,
target = null;
// override our methods
window.scrollTo = window.scroll = function polyfilledScroll(user_opts) {
// if we are already smooth scrolling, we need to stop the previous one
// whatever the current arguments are
if (animating) {
clearAnimationFrame(animating);
}
// not the object syntax, use the default
if (arguments.length === 2) {
return original.apply(this, arguments);
}
if (!user_opts || typeof user_opts !== 'object') {
throw new TypeError("value can't be converted to a dictionnary");
}
// create a clone to not mess the passed object
// and set missing entries
var opts = Object.assign({
left: window.pageXOffset,
top: window.pageYOffset,
behavior: 'auto'
},
user_opts
);
if (opts.behavior !== 'instant' && opts.behavior !== 'smooth') {
// parse 'auto' based on CSS computed value of 'smooth-behavior' property
// But note that if the browser doesn't support this variant
// There are good chances it doesn't support the CSS property either...
opts.behavior = window.getComputedStyle(document.scrollingElement || document.body)
.getPropertyValue('scroll-behavior') === 'smooth' ?
'smooth' : 'instant';
}
if (opts.behavior === 'instant') {
// not smooth, just default to the original after parsing the oject
return original.call(this, opts.left, opts.top);
}
// update our direction
dx = (opts.left - window.pageXOffset) || 0;
dy = (opts.top - window.pageYOffset) || 0;
// going nowhere
if (!dx && !dy) {
return;
}
// save passed arguments
target = opts;
// save the rAF id
animating = anim();
};
// the animation loop
function anim() {
var freq = 16 / 300, // whole anim duration is approximately 300ms #60fps
posX, poxY;
if ( // we already reached our goal on this axis ?
(dx <= 0 && window.pageXOffset <= +target.left) ||
(dx >= 0 && window.pageXOffset >= +target.left)
) {
posX = +target.left;
} else {
posX = window.pageXOffset + (dx * freq);
}
if (
(dy <= 0 && window.pageYOffset <= +target.top) ||
(dy >= 0 && window.pageYOffset >= +target.top)
) {
posY = +target.top;
} else {
posY = window.pageYOffset + (dx * freq);
}
// move to the new position
original.call(window, posX, posY);
// while we are not ok on both axis
if (posX !== +target.left || posY !== +target.top) {
requestAnimationFrame(anim);
} else {
animating = false;
}
}
}
})();
// How to use
function scrollWin() {
window.scrollTo({
left: 1000,
top: 1000,
behavior: 'smooth'
});
}
body {
height: 5000px;
width: 5000px;
/* https://stackoverflow.com/a/51054396/3702797 */
background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), linear-gradient(to right, black 50%, white 50%), linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal;
background-size: 20px 20px;
}
<p>Click the button to scroll the document window to 1000 pixels.</p>
<button onclick="scrollWin()">Click me to scroll!</button>

I use a lot of Pixelarity templates for my clients' websites, and there is a script that (I think) does what you're looking for and is browser cross-compatible. It's called scrolly.js.
I've copied it below (since I also use RequireJS, I encapsulate it in a requires call), and you can also see it in action in many Pixelarity templates including Visualize and Atmosphere
requirejs(['jquery'],function(e){
function u(s,o){
var u,a,f;
if((u=e(s))[t]==0) return n;
a=u[i]()[r];
switch(o.anchor){
case"middle":
f=a-(e(window).height()-u.outerHeight())/2;
break;
default:
case r:
f=Math.max(a,0)
}
return typeof o[i]=="function"?f-=o[i]():f-=o[i], f
}
var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);
e.fn.scrolly=function(i){
var o,a,f,l,c=e(this);
if(this[t]==0) return c;
if(this[t]>1){
for(o=0; o<this[t]; o++) e(this[o]).scrolly(i);
return c
}
l=n, f=c.attr("href");
if(f.charAt(0)!="#"||f[t]<2) return c;
a=jQuery.extend({
anchor:r,
easing:"swing",
offset:0,
parent:e("body,html"),
pollOnce:!1,
speed:1e3
},i), a.pollOnce&&(l=u(f,a)), c.off(s).on(s,function(e){
var t=l!==n?l:u(f,a);
t!==n&&(e.preventDefault(), a.parent.stop().animate({scrollTop:t},a.speed,a.easing))
})
}
});
and you can invoke it on specific elements via jQuery like so (assuming you assign the scrolly class to those anchor elements:
$('.scrolly').scrolly();
I personally also have a header nav that comes down after you scroll down the page, so I include an offset to get the scroll destination just right...
$('.scrolly').scrolly({
offset:function(){
return $('.header').height();
}
});

function myFunction() {
var inputCount = $(".demo").children("input").length;
var idInput = inputCount + 1
$(".demo").append( "<input id="+idInput+" type='text'>");
var inputLast = $('.demo').children().last().attr('id');
$('html, body').animate({
scrollTop: $("#" + inputLast).offset().top
}, 500);
}
.demo input {
width: 100%;
margin: 0 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="myFunction()">Click me</button>
<p class="demo"><input id="1" type="text"></p>

After some close inspection of the timings of window.scroll i would propose the following changes for the doScrolling function.
Use window.scrollBy and set ScrollToOptions.behavior to smooth. it seems that a rate of 2px-2.5px per millisecond is kept in window.scroll after some time, and the timing function is ease-out, since at the first 200 milliseconds a slower rate is kept. You may adjust that rate and timing function by changing the calculation of totalTime.
The above changes mean that you will only have to change three lines of your code and add one.
Please do check the timings of each method supplied in the console.
function doScrolling(elementY) {
let start;
let startingY = window.pageYOffset || document.documentElement.scrollTop;
let diff = elementY - startingY;
let totalTime;
window.requestAnimationFrame(function step(timestamp) {
if (!start) {
start = timestamp;
}
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
if(time < 200) { // this will set the proper totalTime but it adds a delay of about 600ms
totalTime = diff/0.75;
} else {
totalTime = diff/2;
}
// Get percent of completion in range [0, 1].
let percent = Math.min(time/totalTime, 1);
window.scrollBy({ top: diff * percent, behavior: "smooth" });
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) {
return;
}
// Proceed with animation as long as we wanted it to.
if (time < totalTime) {
window.requestAnimationFrame(step);
}
})
}
doScrolling(document.body.scrollHeight);
You could try both methods in the following examples to test for your own.
function doScrolling(elementY) {
let start;
let startingY = window.pageYOffset || document.documentElement.scrollTop;
let diff = elementY - startingY;
let totalTime;
window.requestAnimationFrame(function step(timestamp) {
if (!start) {
start = timestamp;
}
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
if(time < 200) {
totalTime = diff/0.75; // what to do the first 200 ms
} else {
totalTime = diff/0.125; // this will set the proper totalTime but it adds a delay of about 600ms
}
// Get percent of completion in range [0, 1].
let percent = Math.min(time/totalTime, 1);
console.info(parseInt(time),parseInt(diff * percent));
window.scrollBy({
left: 0,
top: diff * percent,
behavior: "auto"
});
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) {
return;
}
// Proceed with animation as long as we wanted it to.
if (time < totalTime) {
window.requestAnimationFrame(step);
}
})
}
/*const testStart = new Date().getTime();
window.addEventListener('scroll', () => {
let now = new Date().getTime();
let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop;
console.log(now-testStart, currentScrollOffset);
});*/
doScrolling(document.body.scrollHeight);
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis aliquam libero. Vestibulum eu neque non augue tristique fermentum. Ut vulputate molestie metus in maximus. Integer a condimentum nisl, a vulputate nisl. Fusce vitae nulla a diam hendrerit ornare ac et ante. Aenean ac tortor turpis. Proin facilisis convallis iaculis. Maecenas vestibulum mauris mi, sit amet gravida augue malesuada at. Ut efficitur magna nunc, ac consequat ipsum interdum nec. Etiam vel ante vitae odio ornare luctus. Curabitur nunc ipsum, porttitor id enim ut, pellentesque vestibulum lorem. Sed tincidunt turpis ac ex tempus finibus. Praesent eget imperdiet ex. Morbi hendrerit pretium libero sit amet mattis. Sed a purus nec sapien mollis venenatis et vitae sem. Curabitur quis congue massa, pellentesque malesuada enim.
Quisque blandit quam posuere hendrerit venenatis. Vestibulum quis dictum felis. Aliquam non bibendum quam. Donec aliquam ex vel metus tristique tincidunt. Duis condimentum felis lacus. Integer gravida eu arcu sed placerat. Sed placerat, est nec luctus gravida, odio nisl vehicula risus, a aliquet massa sem eget leo. Nulla quis turpis ut lectus consequat tincidunt id sit amet lacus. Sed congue, massa fringilla venenatis iaculis, mi erat vulputate est, a vestibulum odio odio sit amet elit. Nulla suscipit rhoncus nisi, a lobortis arcu. Mauris malesuada placerat purus, eget molestie nisi. Nam luctus, odio a aliquam varius, ipsum ante malesuada augue, in congue metus eros id nibh. In varius justo et nunc maximus, vel blandit leo ullamcorper. Phasellus sit amet mi non dui consectetur porta sed vitae ex. Integer mauris diam, vulputate vel turpis ac, ornare auctor massa.
In hac habitasse platea dictumst. Proin id justo erat. Integer pretium luctus quam id congue. Aenean blandit rhoncus accumsan. Nulla ut luctus quam, nec vehicula ligula. Proin finibus sit amet dolor sit amet fringilla. Donec sodales iaculis dolor, sit amet egestas nisi. Aliquam nec scelerisque dolor. Donec maximus nulla eu quam posuere, nec condimentum nisl tristique. Aliquam venenatis massa cursus, scelerisque risus vitae, mattis quam.
Aliquam rhoncus quam quis erat ornare cursus. Vivamus et risus at risus pellentesque fermentum id ac eros. Phasellus vel molestie lacus, eget facilisis orci. Sed efficitur velit molestie nulla scelerisque elementum. Vestibulum luctus nibh justo, at venenatis purus tincidunt at. Pellentesque feugiat condimentum lorem, et accumsan odio. Nam sagittis lorem ut orci dictum fermentum. Integer non augue a sapien semper dictum sit amet ut orci. Aliquam a ultrices risus, non tincidunt enim. Aliquam neque metus, dapibus sed elit a, tempus pretium ante. Nullam non ex in leo tempus facilisis. Duis tempor, nibh at porta euismod, augue est auctor nisi, vitae ornare ante sem semper dolor. Duis hendrerit aliquet luctus.
Sed aliquet sem massa, vitae sodales eros fringilla quis. Quisque non dictum mi, quis facilisis augue. Ut scelerisque laoreet tellus, sed elementum metus pulvinar at. Maecenas faucibus id lorem faucibus maximus. Praesent efficitur, diam quis accumsan posuere, nunc diam porta est, sit amet facilisis velit urna non urna. Vivamus aliquet justo lorem. In hac habitasse platea dictumst. Curabitur auctor ornare sapien, id scelerisque mi posuere in. Morbi nec nisi tortor. Nulla et nisl odio. Integer nec consequat enim.
Integer dui diam, interdum bibendum velit at, accumsan fringilla libero. Suspendisse ac turpis et libero ullamcorper pretium. Etiam non mauris sapien. Nulla non massa turpis. Vestibulum accumsan metus risus, eget pretium nisi auctor in. Pellentesque imperdiet neque lacus, vitae dictum lorem iaculis sit amet. Donec at lacinia metus. Vivamus feugiat non quam non pulvinar. Sed eget eleifend dolor. Fusce suscipit, orci vitae vehicula sollicitudin, mi sem luctus lorem, tempor volutpat purus metus eget ipsum. Duis accumsan tellus non metus ultrices tempus. Etiam ut eros vitae purus pharetra interdum. Morbi a odio nibh. Proin gravida quam elit, at sollicitudin ipsum tristique et. In nec dolor pharetra, consequat dui ut, rutrum enim. Donec mollis felis consectetur turpis interdum, eu pellentesque nisi gravida.
Vivamus mollis, sem vitae finibus pretium, nunc sapien pulvinar est, quis sodales ligula augue nec ipsum. Duis ut faucibus elit, tincidunt interdum sem. Fusce semper enim eget augue lacinia mattis. Aliquam venenatis pretium tellus. Fusce rutrum magna sed erat varius, sit amet luctus dui rutrum. Sed finibus vestibulum massa at porttitor. Vestibulum in commodo ex, eu dictum diam. Aenean congue sem nec hendrerit faucibus.
Etiam viverra nulla sed massa accumsan facilisis. Vivamus fermentum luctus nulla eu tempor. Sed sit amet velit in purus egestas elementum nec gravida sapien. Nullam elementum porttitor nisi vitae posuere. Donec quis nulla at elit consequat gravida. Nulla ac tristique augue, nec molestie quam. Aenean sodales molestie metus, et vulputate sapien facilisis eu. Morbi posuere, orci ac pellentesque vestibulum, eros libero porttitor dolor, sed aliquam tortor neque id purus. Vestibulum non porttitor orci. Maecenas aliquet, nulla sed laoreet tempor, urna augue aliquam augue, quis convallis tellus enim vel justo. Sed eu aliquam ligula, id feugiat leo. Phasellus id cursus sapien. Duis imperdiet, dui eu commodo ultrices, felis mauris malesuada lacus, a dictum nisl quam eget nulla. Vivamus tristique imperdiet purus ac pretium. In suscipit ac justo nec congue. Duis gravida elit pharetra ante posuere, sed eleifend mi mattis.
Vestibulum sit amet nunc in augue consequat lobortis at eu mauris. Nunc congue nisl lorem, vel hendrerit velit condimentum a. Nulla commodo nisl pulvinar elementum viverra. Integer sed ipsum sit amet est egestas porta. Quisque aliquet eu dolor nec mattis. Sed felis leo, imperdiet at efficitur in, volutpat vitae lacus. Nunc vulputate vulputate quam, id molestie neque laoreet in.
In dapibus fermentum lectus, a porta velit. Aenean nec mollis sapien. Vivamus a arcu vulputate risus pulvinar tincidunt. Fusce sed bibendum purus, sed consequat eros. Praesent accumsan nisl a sagittis vestibulum. Vivamus nisi ante, aliquet nec lacus sit amet, luctus maximus ipsum. Suspendisse scelerisque accumsan luctus. Sed eros risus, viverra in ligula non, varius condimentum lacus. Sed dictum pharetra ex, sed finibus ipsum bibendum et.
Nullam sodales cursus scelerisque. Etiam nibh est, lacinia rhoncus tristique a, pretium vitae quam. Praesent urna nisi, placerat nec viverra quis, pharetra vel sapien. In sed imperdiet lectus. Aliquam scelerisque massa eget augue sodales egestas. Suspendisse feugiat massa sed lacus rhoncus, sed accumsan sem eleifend. Sed sed semper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec cursus ex a pretium venenatis. Praesent fringilla leo eu posuere sagittis. Suspendisse lacinia, leo a volutpat vehicula, mauris purus semper est, condimentum bibendum justo eros nec mauris. Aliquam erat volutpat. Aliquam vitae ultrices sapien, a aliquet sapien. Nunc id ligula sit amet nisi porta egestas. Proin lacinia congue mauris, in semper nunc pretium vitae. Nunc convallis dolor id neque vulputate, vitae eleifend dui tincidunt. Maecenas in viverra sapien. Maecenas egestas ex quis turpis ornare, eget auctor lacus condimentum. Vestibulum maximus tellus metus, nec laoreet nisl imperdiet eu. Duis nec finibus lacus, ut sagittis dui. Praesent accumsan, tellus in blandit mollis, sem metus dapibus magna, id imperdiet mauris nisi sed est. Phasellus sed mollis diam. Morbi sagittis arcu in mi ultrices, sit amet pretium sapien volutpat. Duis pellentesque urna quis urna tristique gravida.
</div>
function doScrolling(elementY) {
let start;
let startingY = window.pageYOffset || document.documentElement.scrollTop;
let diff = elementY - startingY;
let totalTime;
window.requestAnimationFrame(function step(timestamp) {
if (!start) {
start = timestamp;
}
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
if(time < 200) {
totalTime = diff/0.75; // what to do the first 200 ms
} else {
totalTime = diff/185; // this will break scroll height to larger chunks and remove the delay, in this example it will scroll all the height (1 chunk)
}
// Get percent of completion in range [0, 1].
let percent = Math.min(time/totalTime, 1);
console.info(parseInt(time),parseInt(diff * percent));
window.scrollBy({
top: diff * percent,
behavior: "smooth"
});
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) {
return;
}
// Proceed with animation as long as we wanted it to.
if (time < totalTime) {
window.requestAnimationFrame(step);
}
})
}
const testStart = new Date().getTime();
window.addEventListener('scroll', () => {
let now = new Date().getTime();
let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop;
console.log(now-testStart, currentScrollOffset);
});
doScrolling(document.body.scrollHeight);
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis aliquam libero. Vestibulum eu neque non augue tristique fermentum. Ut vulputate molestie metus in maximus. Integer a condimentum nisl, a vulputate nisl. Fusce vitae nulla a diam hendrerit
ornare ac et ante. Aenean ac tortor turpis. Proin facilisis convallis iaculis. Maecenas vestibulum mauris mi, sit amet gravida augue malesuada at. Ut efficitur magna nunc, ac consequat ipsum interdum nec. Etiam vel ante vitae odio ornare luctus. Curabitur
nunc ipsum, porttitor id enim ut, pellentesque vestibulum lorem. Sed tincidunt turpis ac ex tempus finibus. Praesent eget imperdiet ex. Morbi hendrerit pretium libero sit amet mattis. Sed a purus nec sapien mollis venenatis et vitae sem. Curabitur quis
congue massa, pellentesque malesuada enim. Quisque blandit quam posuere hendrerit venenatis. Vestibulum quis dictum felis. Aliquam non bibendum quam. Donec aliquam ex vel metus tristique tincidunt. Duis condimentum felis lacus. Integer gravida eu arcu
sed placerat. Sed placerat, est nec luctus gravida, odio nisl vehicula risus, a aliquet massa sem eget leo. Nulla quis turpis ut lectus consequat tincidunt id sit amet lacus. Sed congue, massa fringilla venenatis iaculis, mi erat vulputate est, a vestibulum
odio odio sit amet elit. Nulla suscipit rhoncus nisi, a lobortis arcu. Mauris malesuada placerat purus, eget molestie nisi. Nam luctus, odio a aliquam varius, ipsum ante malesuada augue, in congue metus eros id nibh. In varius justo et nunc maximus,
vel blandit leo ullamcorper. Phasellus sit amet mi non dui consectetur porta sed vitae ex. Integer mauris diam, vulputate vel turpis ac, ornare auctor massa. In hac habitasse platea dictumst. Proin id justo erat. Integer pretium luctus quam id congue.
Aenean blandit rhoncus accumsan. Nulla ut luctus quam, nec vehicula ligula. Proin finibus sit amet dolor sit amet fringilla. Donec sodales iaculis dolor, sit amet egestas nisi. Aliquam nec scelerisque dolor. Donec maximus nulla eu quam posuere, nec
condimentum nisl tristique. Aliquam venenatis massa cursus, scelerisque risus vitae, mattis quam. Aliquam rhoncus quam quis erat ornare cursus. Vivamus et risus at risus pellentesque fermentum id ac eros. Phasellus vel molestie lacus, eget facilisis
orci. Sed efficitur velit molestie nulla scelerisque elementum. Vestibulum luctus nibh justo, at venenatis purus tincidunt at. Pellentesque feugiat condimentum lorem, et accumsan odio. Nam sagittis lorem ut orci dictum fermentum. Integer non augue a
sapien semper dictum sit amet ut orci. Aliquam a ultrices risus, non tincidunt enim. Aliquam neque metus, dapibus sed elit a, tempus pretium ante. Nullam non ex in leo tempus facilisis. Duis tempor, nibh at porta euismod, augue est auctor nisi, vitae
ornare ante sem semper dolor. Duis hendrerit aliquet luctus. Sed aliquet sem massa, vitae sodales eros fringilla quis. Quisque non dictum mi, quis facilisis augue. Ut scelerisque laoreet tellus, sed elementum metus pulvinar at. Maecenas faucibus id
lorem faucibus maximus. Praesent efficitur, diam quis accumsan posuere, nunc diam porta est, sit amet facilisis velit urna non urna. Vivamus aliquet justo lorem. In hac habitasse platea dictumst. Curabitur auctor ornare sapien, id scelerisque mi posuere
in. Morbi nec nisi tortor. Nulla et nisl odio. Integer nec consequat enim. Integer dui diam, interdum bibendum velit at, accumsan fringilla libero. Suspendisse ac turpis et libero ullamcorper pretium. Etiam non mauris sapien. Nulla non massa turpis.
Vestibulum accumsan metus risus, eget pretium nisi auctor in. Pellentesque imperdiet neque lacus, vitae dictum lorem iaculis sit amet. Donec at lacinia metus. Vivamus feugiat non quam non pulvinar. Sed eget eleifend dolor. Fusce suscipit, orci vitae
vehicula sollicitudin, mi sem luctus lorem, tempor volutpat purus metus eget ipsum. Duis accumsan tellus non metus ultrices tempus. Etiam ut eros vitae purus pharetra interdum. Morbi a odio nibh. Proin gravida quam elit, at sollicitudin ipsum tristique
et. In nec dolor pharetra, consequat dui ut, rutrum enim. Donec mollis felis consectetur turpis interdum, eu pellentesque nisi gravida. Vivamus mollis, sem vitae finibus pretium, nunc sapien pulvinar est, quis sodales ligula augue nec ipsum. Duis ut
faucibus elit, tincidunt interdum sem. Fusce semper enim eget augue lacinia mattis. Aliquam venenatis pretium tellus. Fusce rutrum magna sed erat varius, sit amet luctus dui rutrum. Sed finibus vestibulum massa at porttitor. Vestibulum in commodo ex,
eu dictum diam. Aenean congue sem nec hendrerit faucibus. Etiam viverra nulla sed massa accumsan facilisis. Vivamus fermentum luctus nulla eu tempor. Sed sit amet velit in purus egestas elementum nec gravida sapien. Nullam elementum porttitor nisi vitae
posuere. Donec quis nulla at elit consequat gravida. Nulla ac tristique augue, nec molestie quam. Aenean sodales molestie metus, et vulputate sapien facilisis eu. Morbi posuere, orci ac pellentesque vestibulum, eros libero porttitor dolor, sed aliquam
tortor neque id purus. Vestibulum non porttitor orci. Maecenas aliquet, nulla sed laoreet tempor, urna augue aliquam augue, quis convallis tellus enim vel justo. Sed eu aliquam ligula, id feugiat leo. Phasellus id cursus sapien. Duis imperdiet, dui
eu commodo ultrices, felis mauris malesuada lacus, a dictum nisl quam eget nulla. Vivamus tristique imperdiet purus ac pretium. In suscipit ac justo nec congue. Duis gravida elit pharetra ante posuere, sed eleifend mi mattis. Vestibulum sit amet nunc
in augue consequat lobortis at eu mauris. Nunc congue nisl lorem, vel hendrerit velit condimentum a. Nulla commodo nisl pulvinar elementum viverra. Integer sed ipsum sit amet est egestas porta. Quisque aliquet eu dolor nec mattis. Sed felis leo, imperdiet
at efficitur in, volutpat vitae lacus. Nunc vulputate vulputate quam, id molestie neque laoreet in. In dapibus fermentum lectus, a porta velit. Aenean nec mollis sapien. Vivamus a arcu vulputate risus pulvinar tincidunt. Fusce sed bibendum purus, sed
consequat eros. Praesent accumsan nisl a sagittis vestibulum. Vivamus nisi ante, aliquet nec lacus sit amet, luctus maximus ipsum. Suspendisse scelerisque accumsan luctus. Sed eros risus, viverra in ligula non, varius condimentum lacus. Sed dictum pharetra
ex, sed finibus ipsum bibendum et. Nullam sodales cursus scelerisque. Etiam nibh est, lacinia rhoncus tristique a, pretium vitae quam. Praesent urna nisi, placerat nec viverra quis, pharetra vel sapien. In sed imperdiet lectus. Aliquam scelerisque massa
eget augue sodales egestas. Suspendisse feugiat massa sed lacus rhoncus, sed accumsan sem eleifend. Sed sed semper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus ex a pretium venenatis.
Praesent fringilla leo eu posuere sagittis. Suspendisse lacinia, leo a volutpat vehicula, mauris purus semper est, condimentum bibendum justo eros nec mauris.
</div>
const testStart = new Date().getTime();
window.scroll({
top: document.body.scrollHeight,
behavior: "smooth"
});
window.addEventListener('scroll', () => {
let now = new Date().getTime();
let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop;
console.log(now-testStart, currentScrollOffset);
});
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis aliquam libero. Vestibulum eu neque non augue tristique fermentum. Ut vulputate molestie metus in maximus. Integer a condimentum nisl, a vulputate nisl. Fusce vitae nulla a diam hendrerit
ornare ac et ante. Aenean ac tortor turpis. Proin facilisis convallis iaculis. Maecenas vestibulum mauris mi, sit amet gravida augue malesuada at. Ut efficitur magna nunc, ac consequat ipsum interdum nec. Etiam vel ante vitae odio ornare luctus. Curabitur
nunc ipsum, porttitor id enim ut, pellentesque vestibulum lorem. Sed tincidunt turpis ac ex tempus finibus. Praesent eget imperdiet ex. Morbi hendrerit pretium libero sit amet mattis. Sed a purus nec sapien mollis venenatis et vitae sem. Curabitur quis
congue massa, pellentesque malesuada enim. Quisque blandit quam posuere hendrerit venenatis. Vestibulum quis dictum felis. Aliquam non bibendum quam. Donec aliquam ex vel metus tristique tincidunt. Duis condimentum felis lacus. Integer gravida eu arcu
sed placerat. Sed placerat, est nec luctus gravida, odio nisl vehicula risus, a aliquet massa sem eget leo. Nulla quis turpis ut lectus consequat tincidunt id sit amet lacus. Sed congue, massa fringilla venenatis iaculis, mi erat vulputate est, a vestibulum
odio odio sit amet elit. Nulla suscipit rhoncus nisi, a lobortis arcu. Mauris malesuada placerat purus, eget molestie nisi. Nam luctus, odio a aliquam varius, ipsum ante malesuada augue, in congue metus eros id nibh. In varius justo et nunc maximus,
vel blandit leo ullamcorper. Phasellus sit amet mi non dui consectetur porta sed vitae ex. Integer mauris diam, vulputate vel turpis ac, ornare auctor massa. In hac habitasse platea dictumst. Proin id justo erat. Integer pretium luctus quam id congue.
Aenean blandit rhoncus accumsan. Nulla ut luctus quam, nec vehicula ligula. Proin finibus sit amet dolor sit amet fringilla. Donec sodales iaculis dolor, sit amet egestas nisi. Aliquam nec scelerisque dolor. Donec maximus nulla eu quam posuere, nec
condimentum nisl tristique. Aliquam venenatis massa cursus, scelerisque risus vitae, mattis quam. Aliquam rhoncus quam quis erat ornare cursus. Vivamus et risus at risus pellentesque fermentum id ac eros. Phasellus vel molestie lacus, eget facilisis
orci. Sed efficitur velit molestie nulla scelerisque elementum. Vestibulum luctus nibh justo, at venenatis purus tincidunt at. Pellentesque feugiat condimentum lorem, et accumsan odio. Nam sagittis lorem ut orci dictum fermentum. Integer non augue a
sapien semper dictum sit amet ut orci. Aliquam a ultrices risus, non tincidunt enim. Aliquam neque metus, dapibus sed elit a, tempus pretium ante. Nullam non ex in leo tempus facilisis. Duis tempor, nibh at porta euismod, augue est auctor nisi, vitae
ornare ante sem semper dolor. Duis hendrerit aliquet luctus. Sed aliquet sem massa, vitae sodales eros fringilla quis. Quisque non dictum mi, quis facilisis augue. Ut scelerisque laoreet tellus, sed elementum metus pulvinar at. Maecenas faucibus id
lorem faucibus maximus. Praesent efficitur, diam quis accumsan posuere, nunc diam porta est, sit amet facilisis velit urna non urna. Vivamus aliquet justo lorem. In hac habitasse platea dictumst. Curabitur auctor ornare sapien, id scelerisque mi posuere
in. Morbi nec nisi tortor. Nulla et nisl odio. Integer nec consequat enim. Integer dui diam, interdum bibendum velit at, accumsan fringilla libero. Suspendisse ac turpis et libero ullamcorper pretium. Etiam non mauris sapien. Nulla non massa turpis.
Vestibulum accumsan metus risus, eget pretium nisi auctor in. Pellentesque imperdiet neque lacus, vitae dictum lorem iaculis sit amet. Donec at lacinia metus. Vivamus feugiat non quam non pulvinar. Sed eget eleifend dolor. Fusce suscipit, orci vitae
vehicula sollicitudin, mi sem luctus lorem, tempor volutpat purus metus eget ipsum. Duis accumsan tellus non metus ultrices tempus. Etiam ut eros vitae purus pharetra interdum. Morbi a odio nibh. Proin gravida quam elit, at sollicitudin ipsum tristique
et. In nec dolor pharetra, consequat dui ut, rutrum enim. Donec mollis felis consectetur turpis interdum, eu pellentesque nisi gravida. Vivamus mollis, sem vitae finibus pretium, nunc sapien pulvinar est, quis sodales ligula augue nec ipsum. Duis ut
faucibus elit, tincidunt interdum sem. Fusce semper enim eget augue lacinia mattis. Aliquam venenatis pretium tellus. Fusce rutrum magna sed erat varius, sit amet luctus dui rutrum. Sed finibus vestibulum massa at porttitor. Vestibulum in commodo ex,
eu dictum diam. Aenean congue sem nec hendrerit faucibus. Etiam viverra nulla sed massa accumsan facilisis. Vivamus fermentum luctus nulla eu tempor. Sed sit amet velit in purus egestas elementum nec gravida sapien. Nullam elementum porttitor nisi vitae
posuere. Donec quis nulla at elit consequat gravida. Nulla ac tristique augue, nec molestie quam. Aenean sodales molestie metus, et vulputate sapien facilisis eu. Morbi posuere, orci ac pellentesque vestibulum, eros libero porttitor dolor, sed aliquam
tortor neque id purus. Vestibulum non porttitor orci. Maecenas aliquet, nulla sed laoreet tempor, urna augue aliquam augue, quis convallis tellus enim vel justo. Sed eu aliquam ligula, id feugiat leo. Phasellus id cursus sapien. Duis imperdiet, dui
eu commodo ultrices, felis mauris malesuada lacus, a dictum nisl quam eget nulla. Vivamus tristique imperdiet purus ac pretium. In suscipit ac justo nec congue. Duis gravida elit pharetra ante posuere, sed eleifend mi mattis. Vestibulum sit amet nunc
in augue consequat lobortis at eu mauris. Nunc congue nisl lorem, vel hendrerit velit condimentum a. Nulla commodo nisl pulvinar elementum viverra. Integer sed ipsum sit amet est egestas porta. Quisque aliquet eu dolor nec mattis. Sed felis leo, imperdiet
at efficitur in, volutpat vitae lacus. Nunc vulputate vulputate quam, id molestie neque laoreet in. In dapibus fermentum lectus, a porta velit. Aenean nec mollis sapien. Vivamus a arcu vulputate risus pulvinar tincidunt. Fusce sed bibendum purus, sed
consequat eros. Praesent accumsan nisl a sagittis vestibulum. Vivamus nisi ante, aliquet nec lacus sit amet, luctus maximus ipsum. Suspendisse scelerisque accumsan luctus. Sed eros risus, viverra in ligula non, varius condimentum lacus. Sed dictum pharetra
ex, sed finibus ipsum bibendum et. Nullam sodales cursus scelerisque. Etiam nibh est, lacinia rhoncus tristique a, pretium vitae quam. Praesent urna nisi, placerat nec viverra quis, pharetra vel sapien. In sed imperdiet lectus. Aliquam scelerisque massa
eget augue sodales egestas. Suspendisse feugiat massa sed lacus rhoncus, sed accumsan sem eleifend. Sed sed semper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus ex a pretium venenatis.
Praesent fringilla leo eu posuere sagittis. Suspendisse lacinia, leo a volutpat vehicula, mauris purus semper est, condimentum bibendum justo eros nec mauris. Aliquam erat volutpat. Aliquam vitae ultrices sapien, a aliquet sapien. Nunc id ligula sit
amet nisi porta egestas. Proin lacinia congue mauris, in semper nunc pretium vitae. Nunc convallis dolor id neque vulputate, vitae eleifend dui tincidunt. Maecenas in viverra sapien. Maecenas egestas ex quis turpis ornare, eget auctor lacus condimentum.
Vestibulum maximus tellus metus, nec laoreet nisl imperdiet eu. Duis nec finibus lacus, ut sagittis dui. Praesent accumsan, tellus in blandit mollis, sem metus dapibus magna, id imperdiet mauris nisi sed est. Phasellus sed mollis diam. Morbi sagittis
arcu in mi ultrices, sit amet pretium sapien volutpat. Duis pellentesque urna quis urna tristique gravida. Duis ut finibus elit, sed suscipit nibh. Proin tristique, velit ut mattis blandit, tortor nisl rhoncus enim, id scelerisque enim lacus et ante.
</div>