Count the number of words in a string composed by paragraphs - javascript

I'm trying to count the number of words present in a string. This string is composed by 3 paragraphs with 281 words.
I'm using the split.length method, but the word counting I'm getting is 279 and not 281. Can't figure out what I'm doing wrong in order to be missing 2 words from the counting. Can you help please?
const loremIpsumString = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet ornare ante, iaculis facilisis elit bibendum pulvinar. Vestibulum nec tempor libero, vitae ullamcorper arcu. Pellentesque tempor euismod viverra. Donec et mi at leo ultrices elementum sed sed lectus. Quisque aliquam, urna cursus ornare accumsan, eros turpis sagittis dui, efficitur placerat orci ex sit amet est. Nunc sodales neque elit, quis consequat magna tristique ac. Suspendisse potenti. Nunc volutpat pulvinar neque, non interdum felis varius eget. Praesent dictum eros a purus tempor, et pellentesque ipsum dictum. Nulla ac magna nisl.
Quisque vulputate convallis ex nec venenatis. Nunc hendrerit tristique dictum. Integer posuere sed libero id vestibulum. Aliquam quis elit et massa varius euismod. Maecenas et imperdiet neque. Phasellus aliquet purus sed enim pharetra tempus. Ut euismod facilisis enim, quis dictum nulla pulvinar quis. Donec a est leo. In hac habitasse platea dictumst. Proin fringilla, quam et feugiat pretium, erat augue pretium eros, ac facilisis eros lectus vel ipsum.
Donec dui libero, sagittis eget auctor sed, dictum in orci. Mauris mollis fermentum purus nec aliquet. In ultricies mi sed tortor vehicula, ut semper ex posuere. Suspendisse commodo massa non sem porta suscipit. In finibus neque vel dolor malesuada mattis. Etiam tincidunt mattis velit nec viverra. Nulla facilisi. Mauris eu odio pharetra, vehicula augue sit amet, accumsan tortor. Sed tempus metus ac gravida scelerisque. Aenean ullamcorper orci id ipsum bibendum, a sollicitudin ligula sagittis. Integer id tellus sit amet enim faucibus consequat. Duis nisi purus, volutpat sit amet fermentum eu, tincidunt non purus. Praesent leo orci, tempor et felis non, suscipit lacinia mi. Nulla a justo sed elit tincidunt imperdiet. Aenean hendrerit vehicula odio, sit amet cursus eros aliquet non. Vestibulum vulputate scelerisque ultricies.`;
const numWords = (loremIpsumString.split(" ").length);
console.log(numWords);
Many thanks!


You're splitting the text by the literal space, so the words that are on paragraph boundaries are considered a single "word", e.g. nisl.\n\nQuisque. You need to split by any whitespace instead, using a regular expression:
const numWords = loremIpsumString.split(/\s+/g).length;
This MDN guide provides an introduction to regular expressions.
When working with dynamic strings, it would be also a good idea to remove leading and trailing whitespace before counting:
const numWords = someString.trim().split(/\s+/g).length;


const regexConst = /[a-zA-Z]\w*/g
const loremIpsumString = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet ornare ante, iaculis facilisis elit bibendum pulvinar. Vestibulum nec tempor libero, vitae ullamcorper arcu. Pellentesque tempor euismod viverra. Donec et mi at leo ultrices elementum sed sed lectus. Quisque aliquam, urna cursus ornare accumsan, eros turpis sagittis dui, efficitur placerat orci ex sit amet est. Nunc sodales neque elit, quis consequat magna tristique ac. Suspendisse potenti. Nunc volutpat pulvinar neque, non interdum felis varius eget. Praesent dictum eros a purus tempor, et pellentesque ipsum dictum. Nulla ac magna nisl.
Quisque vulputate convallis ex nec venenatis. Nunc hendrerit tristique dictum. Integer posuere sed libero id vestibulum. Aliquam quis elit et massa varius euismod. Maecenas et imperdiet neque. Phasellus aliquet purus sed enim pharetra tempus. Ut euismod facilisis enim, quis dictum nulla pulvinar quis. Donec a est leo. In hac habitasse platea dictumst. Proin fringilla, quam et feugiat pretium, erat augue pretium eros, ac facilisis eros lectus vel ipsum.
Donec dui libero, sagittis eget auctor sed, dictum in orci. Mauris mollis fermentum purus nec aliquet. In ultricies mi sed tortor vehicula, ut semper ex posuere. Suspendisse commodo massa non sem porta suscipit. In finibus neque vel dolor malesuada mattis. Etiam tincidunt mattis velit nec viverra. Nulla facilisi. Mauris eu odio pharetra, vehicula augue sit amet, accumsan tortor. Sed tempus metus ac gravida scelerisque. Aenean ullamcorper orci id ipsum bibendum, a sollicitudin ligula sagittis. Integer id tellus sit amet enim faucibus consequat. Duis nisi purus, volutpat sit amet fermentum eu, tincidunt non purus. Praesent leo orci, tempor et felis non, suscipit lacinia mi. Nulla a justo sed elit tincidunt imperdiet. Aenean hendrerit vehicula odio, sit amet cursus eros aliquet non. Vestibulum vulputate scelerisque ultricies.`;
const totalWords = loremIpsumString.match(regexConst).length
console.log(totalWords)
will console.log the total amount of words (DOESNT WORK WITH ACCENT MARKS)

Related

Solution for hyphen word [duplicate]

This question already has answers here:
Regex to match words with hyphens and/or apostrophes
(7 answers)
Closed 4 months ago.
I am wondering about this case:
Is it possible to do something like that?
if word, for example co-worker is hyphen, jquery can take detect and take word and replace with class inside?
Example:
<span class="hyphenated-word">co-worker</span>
I think something about preg.replace function, but not sure how to detect word.
Can anybody give me a tip for this?

You could use a regex to detect any hyphenated word:
function highlightHyphenated(element) {
// Regular expression matching any group composed by:
// - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones), followed by
// - `-` a hyphen, followed by
// - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones)
const re = /([A-Za-zÀ-ÖØ-öø-ÿ]+-[A-Za-zÀ-ÖØ-öø-ÿ]+)/gim;
if (re.test(element.innerText)) {
element.innerHTML = element.innerHTML.replace(re, '<span class="hyphenated">$1</span>');
}
}
document.querySelectorAll('p').forEach(el => highlightHyphenated(el));
.hyphenated {
display: inline-block;
background-color: yellow;
font-weight: bold;
}
<p>Lorem ipsum dolor sit-amet, consectetur adipiscing elit. Etiam orci tortor, aliquet quis mollis in, posuere id ipsum. Vestibulum quis nibh augue. Sed id congue ex. Suspendisse eget elit fringilla, commodo mi vitae, luctus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus quam vitae leo eleifend, a laoreet neque varius. Morbi quis posuere risus, at scelerisque dui. Morbi sit amet lorem purus. Pellentesque auctor ut libero sed tempor. Integer vitae erat id leo porttitor blandit. Duis cursus lacus quis mauris facilisis, dapibus auctor nisl feugiat. Donec consectetur dolor eu suscipit aliquam. Fusce magna ante, luctus a arcu at, volutpat blandit tortor. Vivamus bibendum sem id mauris dapibus, et ultricies elit fermentum. Aliquam eu efficitur ipsum. Pellentesque eu velit ipsum.</p>
<p>Sed-fermentum lorem a ipsum sodales, vel vestibulum odio hendrerit. Aenean auctor ipsum in urna finibus, eu vulputate massa rutrum. Curabitur id eros pulvinar, dapibus justo nec, euismod sem. Ut ornare turpis velit, non aliquet est rhoncus eu. Etiam ex dolor, congue eleifend nisl eget, tempus dictum nulla. Integer ultricies enim eu mattis sagittis. Aliquam malesuada condimentum semper. Aliquam erat volutpat. Integer in dapibus sapien, tempor venenatis nisi. Curabitur eget sapien vitae nisi pulvinar volutpat aliquet ut augue. Cras pretium congue est, at pulvinar velit egestas vitae. Pellentesque non dui et urna posuere mattis.</p>
<p>Fusce consectetur vel purus a rutrum. Nulla vitae-metus nec eros facilisis porta. Ut quis sem ac nibh finibus porta egestas ac neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sagittis nisl ante, vel placerat dui fermentum eu. Quisque placerat placerat neque. Nullam vel euismod nisl. Nullam aliquet enim vitae odio ultricies tincidunt. Nullam sagittis arcu at eleifend commodo. In hac habitasse platea dictumst. Nunc nibh lacus, pharetra nec sapien quis, congue pharetra felis. Vivamus porta, ex et convallis sagittis, ex dui porttitor augue, et tempus neque risus quis diam. Morbi eget leo lectus.</p>
<p>Sed at justo euismod, luctus lorem ut, dignissim libero. Curabitur vel auctor neque, vel ultrices nulla. Duis in aliquet-ligula. Aliquam sed est nisl. Aliquam enim orci, congue eget erat sed, imperdiet pharetra est. Fusce efficitur a tortor-nec fringilla. Sed sed tempus tellus, efficitur ornare lorem. Proin risus sem, mollis et lectus nec, rhoncus accumsan magna. Mauris hendrerit ligula eu est pretium, id bibendum ante tincidunt. Nam cursus vehicula diam, in eleifend magna blandit at. Vestibulum sit amet bibendum elit.</p>
<p>Donec magna est, placerat in vehicula eget, convallis non metus. Proin posuere ultricies neque a scelerisque. Quisque eu ex quis magna varius-vulputate. Sed venenatis dapibus iaculis. Cras lacinia ex et ante mollis, et condimentum ante porta. Sed tempus diam at fringilla condimentum. Aenean est ex, sollicitudin at blandit ac, dapibus eu mauris. Sed a tincidunt arcu. Maecenas sagittis cursus eros, ut commodo neque maximus id. Aenean accumsan purus eu tortor eleifend, vel volutpat turpis tempus. Vestibulum et metus non eros rhoncus placerat. Donec congue enim libero. Cras placerat, urna eu tincidunt aliquam, nisl odio viverra felis, id volutpat ipsum libero a leo.</p>
If you do not care about accented letters, you can replace [A-Za-zÀ-ÖØ-öø-ÿ]+ with [A-Za-z]+

Select an option in javascript and search for the paragraph

I want to make a simple html site which have some paragraphs and a drop-down list. When the site is loaded I want all the paragraphs to be inserted in the drop-down list (the first 50 characters for each option). When I choose an option, I want the paragraph of the chosen option to be bold and the page to scroll there. So far, I only did this. Please help! I want only in javascript.
<script language="javascript">
function add()
{
var x = document.getElementById("myselect");
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("value", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y;
x.add(option);
}
}
function dothis()
{
//var w = document.getElementById("myselect").selectedIndex;
//w.scrollIntoView();
var x = document.getElementById("myselect");
var y = document.getElementById("myselect").options;
}
</script>
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Εργαστήριο 10 άσκηση 3</title>
</head>
<body onload="add()">
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<select id="myselect" onchange="dothis()">
<option>1</option>
<option>2</option>
</select>
</body>

First, you want to find the good paragraph from your select. So you should find a way to link the paragraph to its select option.
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("id", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y.substring(0,50) + "..."; // Cutting the text in select to the first 50 characters
option.value = "all_pars" + i
x.add(option);
}
Here we go. We are now, rather than a value, choosing a id for each paragraph, and adding that id as a value to the linked select option. We are also cutting the paragraph down to 50 characters.
With this, it's easy to find the paragraph and change its style.
function dothis()
{
// Value indicating which paragraph should be chosen.
var y = document.getElementById("myselect").value;
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
// Putting all paragraph to not-bold
pars[i].setAttribute("style", "font-weight: normal;");
}
document.getElementById(y).setAttribute("style", "font-weight: bold;"); // Putting our paragraph to bold
}
Now we have our text in bold when we select it. We just have to add anchor to each paragraph and change the location to the anchor when we select the paragraph. Here is the final code, with lorem ipsum as paragraphs.
function add()
{
var x = document.getElementById("myselect");
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("id", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y.substring(0,50) + "..."; // Cutting the text in select to the first 50 characters
option.value = "all_pars" + i
x.add(option);
// Add anchor to the paragraph
var newLink = document.createElement('a');
newLink.name = "all_pars" + i;
pars[i].appendChild(newLink);
}
pars[0].setAttribute("style", "font-weight: bold;");
}
function dothis()
{
var x = document.getElementById("myselect");
var y = document.getElementById("myselect").value; // Value indicating which paragraph should be chosen.
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("style", "font-weight: normal;"); // Putting all paragraph to not-bold
}
document.getElementById(y).setAttribute("style", "font-weight: bold;"); // Putting our paragraph to bold
window.location = '#' + y; // Jump to anchor
}
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Εργαστήριο 10 άσκηση 3</title>
</head>
<body onload="add()">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<select id="myselect" onchange="dothis()">
</select>
</body>
</html>

How to make image stick to the bottom of section on all device heights

I want to make this image to be on the bottom of this section (section 18) of one page website (which has 21 section) for all devices heights using jQuery.
I made it by using position: absolute etc. but just on my screen size. When I check that on other devices that have different heights, it's not stuck to the bottom.

You can try this.
.imagebottom{
position:fixed;
bottom:0px;
left:50%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>

Use position: sticky instead of position: fixed. A sticky element always sticks to its nearest ancestor element which in your case is the 18th section of your website.
.imagebottom{
position: sticky;
bottom:0px;
height: 50px;
}
<div>
<h2>Section 17</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<br />
<hr />
<br />
<div>
<h2>Section 18</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</p>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>
</div>
<br />
<hr />
<br />
<div>
<h2>Section 19</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>

How to disable mousewheel scroll in chrome with javascript/jquery [duplicate]

This question already has answers here:
Disabling mouse scrolling
(4 answers)
Closed 3 years ago.
I used
$('body').bind("mousewheel", function() {
return false;
});
It's working at first. but suddenly it wasn't working at all.
On chrome console wrote the issue:
"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
https://www.chromestatus.com/features/6662647093133312"
Is there other way to disable mousewheel?
https://jsfiddle.net/7b0rzaL4/10/

There's a simpler way - just use onwheel. Try scrolling in the snippet below - you can't unless you use the scroll bar:
window.onwheel = () => false;
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>

You can check this
$(window).on("mousewheel", function(e){
if(e.originalEvent.deltaY > 0) {
e.preventDefault();
return;
} else if (e.originalEvent.wheelDeltaY < 0) {
e.preventDefault();
return;
}
});

How to div scroll

<div class="btn-toggle">
<div class="description ">
<div class="Area" style="height: auto; visibility: visible; overflow: hidden;">
<div class="scrollbar" style="height: 340px;">
<div class="watch" style="height: 340px;">
<div class="round" style="height: 100px; top: 0px;"></div>
</div>
</div>
While running selenium code, need to scroll to the bottom of the div. How do update "style =height: 100px; top: 100px;".
How to accomplish this using Javascript?

Sorry there was little confusion ,but not not now. check out fiddle .See style properly.
Working fiddle
Use the following code , say you want to scroll to bottom of "round" div,
var scr = $('#box')[0].scrollHeight;
$('#box').animate({scrollTop: scr},2000);
CSS :
#box{
overflow:auto;
width:300px;
height:200px;
}
Say HTML is
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non tellus nisi, at euismod lacus. Praesent elementum, purus vitae imperdiet bibendum, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra neque, non dignissim sem condimentum vitae. Quisque varius nibh nec felis facilisis nec consectetur augue ultrices.
Nullam ut arcu nisi, eu volutpat neque. Etiam lobortis, erat vel mollis aliquam, sapien eros bibendum erat, vel mollis purus neque sit amet quam. Proin semper aliquet leo. Morbi erat ipsum, vehicula eget mattis sed, venenatis in lectus. Cras quis dui nunc. Vestibulum viverra tempus nisl pulvinar tempor. Donec vitae nunc quam, eu placerat nulla. Suspendisse potenti. Nulla ante dolor, varius eget porttitor eu, malesuada vel nisl. Vestibulum in justo eros. Maecenas id lorem metus, et auctor nibh. Maecenas ut porttitor felis.
Praesent blandit elementum fringilla. Curabitur tincidunt, libero in convallis volutpat, enim purus sodales lacus, vel euismod ante erat nec est. Nam non metus quis lorem ornare dictum sit amet et mauris. Curabitur molestie porta tortor vel adipiscing. Pellentesque sed nulla vel neque tempor sodales. Aliquam erat volutpat. Nullam nisl mauris, faucibus at blandit mollis, malesuada eu risus. Nunc urna lacus, egestas et euismod non, vehicula sed ligula.
</div>

Categories

Resources