Changing css property with onscroll

Changing css property with onscroll - javascript

how do I change css property like background color onscroll using JavaScript.
window.onscroll = () =>{
if(document.body.scrollTop = 30){
document.body.style.backgroundColor = "grey"}
else{document.body.style.backgroundColor = "white"}
}

You want to add a listener to you window object for the "scroll" event, in the handler you can use window.scrollY value in order to know how much page is scrolled.
window.addEventListener("scroll", () =>{
if(window.scrollY > 30){
document.body.style.backgroundColor = "grey"}
else{
document.body.style.backgroundColor = "white"
}
})
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in egestas lectus, non porta nunc. Vivamus id pharetra purus. Vivamus semper pellentesque dui. Duis cursus fermentum nunc, et tempor leo imperdiet luctus. Fusce a nibh id felis faucibus feugiat a eget diam. Fusce ante ex, aliquam at velit eget, aliquet laoreet ipsum. Quisque iaculis fermentum consectetur. Etiam facilisis nec nisl sit amet eleifend. Aliquam erat volutpat. Quisque varius libero sed nunc lacinia gravida. Vestibulum at ex ac magna vehicula lobortis. Morbi rhoncus massa non ligula pulvinar dictum. Curabitur turpis libero, maximus eget pharetra non, luctus id orci. Integer id augue id diam ultrices dignissim.
Quisque et ante vel orci auctor imperdiet ac ut nisi. Ut sollicitudin at neque in imperdiet. Quisque eu laoreet nisi. Duis id venenatis diam, in lacinia erat. Quisque ullamcorper fringilla mauris, vel iaculis augue iaculis ac. Mauris luctus, quam vel dignissim accumsan, sem libero sollicitudin justo, et condimentum augue lectus vel nibh. Aliquam sit amet dolor vel urna malesuada sagittis id quis ipsum. Vivamus ut arcu porta, auctor massa ac, suscipit tortor. Mauris in bibendum sapien. Sed quam dui, aliquam nec tellus tincidunt, vehicula vestibulum nunc. Donec aliquet tempor diam nec convallis. Integer a leo vitae nunc porta venenatis ac eu arcu. Aliquam erat volutpat. Phasellus quis urna neque. In dapibus purus sit amet lectus finibus pellentesque. Vivamus viverra sed enim pharetra dapibus.
In accumsan mollis interdum. Phasellus pulvinar purus nec libero porttitor, ut sollicitudin arcu consectetur. Nullam justo mi, feugiat sit amet sollicitudin volutpat, commodo id metus. Donec vitae sem eu lorem consectetur lacinia. Fusce consequat erat id metus pharetra, quis interdum purus bibendum. Phasellus justo magna, imperdiet non nulla id, porta aliquet ante. Nam dignissim diam ut quam eleifend convallis. Phasellus tincidunt odio urna, a pharetra magna blandit eleifend. Integer euismod nisl pellentesque magna varius sodales. Vestibulum consequat sagittis bibendum. Ut cursus, velit quis suscipit auctor, felis urna iaculis eros, nec finibus augue ligula eu ex. Ut nec sapien nulla. Integer blandit mattis venenatis. Donec convallis luctus odio, a mattis massa varius vehicula. Aliquam a semper tortor. Phasellus nec purus id purus fringilla sodales.
Aliquam erat volutpat. Nulla feugiat rhoncus pulvinar. Pellentesque quis nunc dignissim, gravida ipsum sed, venenatis tellus. Quisque ultricies ipsum eget odio tempus, nec aliquam tellus sodales. Ut vitae ultricies diam. Duis iaculis diam venenatis nulla hendrerit efficitur. Sed aliquet faucibus finibus. Suspendisse cursus scelerisque placerat. Aenean laoreet a ipsum et viverra.
Integer non nisl accumsan, vestibulum enim ac, auctor purus. Vivamus eget condimentum nulla. Nunc faucibus elementum arcu, sed pretium augue posuere vitae. Suspendisse maximus dapibus enim, et dictum nisl imperdiet a. Aliquam a laoreet tortor, vel placerat felis. Fusce tristique orci ligula, et tincidunt odio sagittis eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin aliquam, dolor at posuere facilisis, neque leo imperdiet arcu, sit amet sollicitudin mi nibh id erat. Quisque sit amet lectus quis lectus aliquam ullamcorper varius id turpis. Vestibulum nec velit quis justo facilisis ullamcorper at vel neque. Donec sodales varius leo non vehicula. Proin sed molestie velit. Pellentesque ac porttitor eros. Sed at ullamcorper dolor.
Sed consequat viverra ex, eu pretium velit vehicula et. Donec vestibulum commodo leo id molestie. Praesent pharetra eros ac leo aliquam, sit amet interdum sem mattis. Ut tincidunt condimentum mauris, et sollicitudin felis. Aenean volutpat dapibus diam a fringilla. Sed iaculis faucibus nunc, eget dictum nulla auctor vel. Nullam sollicitudin porttitor accumsan. Nulla et orci ligula. Mauris imperdiet finibus ligula convallis bibendum. Nullam magna lectus, sodales non velit sit amet, dapibus porttitor sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Curabitur eu ligula eu nisl dapibus vulputate quis id ante. Ut vitae arcu in tortor ultricies pretium eu sit amet urna. Pellentesque malesuada libero nunc, quis elementum quam tristique at. Nulla mollis et dui a gravida. Nulla iaculis finibus sem sit amet ornare. Praesent pellentesque bibendum velit, ut semper odio dictum consequat. Donec feugiat venenatis lacus, at rutrum libero venenatis eget. Donec tempor lorem neque. Vestibulum eu quam vehicula, facilisis elit quis, scelerisque ipsum. Suspendisse aliquet arcu at arcu vestibulum dictum.
Ut ut pharetra sapien, nec posuere dolor. Nunc convallis viverra ipsum in tempor. Donec interdum viverra mauris, vel placerat lectus ultricies non. Etiam interdum vestibulum aliquet. Duis luctus vel elit eget condimentum. Sed molestie pulvinar dictum. Aliquam libero enim, eleifend at vehicula et, porttitor ac turpis. Duis quis urna elit.
Morbi facilisis volutpat turpis eget tempus. Aliquam eu dolor ornare, lacinia nibh ut, interdum ligula. Aliquam finibus egestas dapibus. Sed at semper nulla. Sed eu sodales risus. Sed interdum ante nec mi suscipit, in aliquet erat posuere. Sed velit risus, dapibus nec posuere ac, vulputate sed dui. Sed lobortis enim in ipsum imperdiet rhoncus. Nulla eu urna quam. Nulla dapibus quis dui eu consectetur. Cras feugiat, ex in finibus fringilla, orci erat congue urna, sed consequat quam dolor ac enim. Integer facilisis euismod nunc quis auctor. Nam iaculis ullamcorper magna, sed feugiat neque volutpat vel. Integer varius ultrices erat quis interdum. Proin sit amet sagittis sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
In at ullamcorper ipsum. Nam ultrices, lectus et gravida posuere, est tortor dignissim ante, at sodales ipsum ex tempor nisl. Cras fermentum tempus malesuada. Nam fermentum ante in massa tristique, porttitor fermentum turpis iaculis. Aenean et neque sed lacus auctor facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis non suscipit nulla. Nullam at magna dui. Duis fringilla vitae arcu at mollis. Praesent ultrices efficitur dolor, eget tempus dolor rutrum eu. Ut condimentum sodales lectus ut lacinia. Suspendisse potenti. Sed nec est in dui dictum blandit. Cras eu neque felis. Integer luctus faucibus augue, quis luctus erat scelerisque eu.
</body>

FYI, Scroll slowly because it will render fast or You can console or alert it inside the condition. So you can understand it.
window.onscroll = () =>{
let element = window.pageYOffset;
element = Math.round(element)
console.log(element)
if(element == 30){
document.body.style.backgroundColor = "red"}
else{document.body.style.backgroundColor = "white"}
}
<body>
<div style="height:2000px; width:100px">
</div>
</body>

Related

I'm writing a PDF-like page format in HTML. How can I move text to the next page when the page height is exceeded

The data
I have JSON data that I want to use in a PDF-report. The PDF-report is created from HTML.
[
{
"title": "Chapter 1",
"text": "Some large text"
},
{
"title": "Chapter 2",
"text": "Some large text"
}
]
Format of the report page
All pages has the following format.
What I need
I need to add the text within the content of the page. But when the text is exceeding it has to jump to the next page and keeps the same format. Does anyone have an idea how to accomplish this?

Original idea: https://stackoverflow.com/a/56141110/1543677
The idea is to use CSS-columns to auto-break up the content in the appropriate pages. Do note that this will generate duplicate content and useless DOM nodes, so a) don't use it for a website, b) use a lazy-load approach (don't load a whole book at once).
HTML structure:
<div id="content">
</div>
<div id="container">
</div>
CSS:
body{
background:#ccc;
}
p{
margin-top: 0;
}
.page {
background: #fff;
height: 729px;
width: 535px;
padding: 93px 30px 20px 30px;
margin: 0 auto 10px;
position: relative;
}
.pageContent {
height: 719px;
padding: 0px;
/*border: 1px dotted;*/
position: relative;
overflow: hidden;
}
.innerPage{
width: 535px;
height: 719px;
column-fill: auto;
column-gap: 0;
column-width: 535px;
}
.pageHeader{
/*border: 1px dotted;*/
margin: 30px;
padding: 5px 30px 5px 0px;
position: absolute;
top:0;
left:0;
right:0;
font-weight: bold;
}
.pageHeader .pageCounter{
position: absolute;
right: 0;
top: 0;
margin: 5px 0px;
text-align: right;
}
#content {
margin: 20px auto;
width: 535px;
height: 721px;
overflow: auto;
border: 1px solid #ccc;
column-fill: auto;
column-gap: 0;
column-width: 595px;
}
Sample data:
let data=[
{
"title": "Chapter 1",
"text": `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.


Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.


Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.


Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.


Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.


Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.


Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.


Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.


Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.


Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.


Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.


Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.


Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.


Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.


Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.


Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.


Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.


Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.


Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.


Curabitur condimentum gravida nibh, id aliquet turpis fringilla a. Nullam nec neque efficitur, sodales arcu in, tincidunt ante. In non augue urna. Sed sit amet erat justo. Maecenas nec convallis ex. Sed nisl purus, posuere ut nisi sit amet, efficitur placerat ex. Aliquam hendrerit dui sed lectus sagittis, id hendrerit urna dignissim. Vivamus dolor lorem, iaculis et purus nec, vehicula aliquet neque. Proin lobortis fringilla risus quis consequat. Aenean ultricies sapien et ipsum dignissim, nec egestas tortor feugiat. Suspendisse lectus quam, molestie id lacus convallis, egestas vulputate enim. Aliquam ac venenatis turpis. Praesent consequat mollis est, at gravida libero eleifend sit amet. Vivamus et quam augue.
`
},
{
"title": "Chapter 2",
"text": `

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.


Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.


Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.


Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.


Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.


Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.


Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.


Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.


Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.


Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.


Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.


Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.


Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.


Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.


Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.


Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.


Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.


Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.


Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.

`
}
];
JS:
function generatePages(){
const pageWidth = 535;
const content = document.getElementById('content');
const container = document.getElementById('container');
let counter=1;
for (let i=0;i<data.length;i++){
content.innerHTML=data[i].text;
let totalWidth = content.scrollWidth;
let totalPages = totalWidth / pageWidth;
for (let p = 0; p < totalPages; p++) {
let pageHeader = document.createElement('div');
pageHeader.innerHTML = data[i].title;
pageHeader.className = 'pageHeader';
let pageCounter = document.createElement('span');
pageCounter.innerHTML = "p. "+counter;
pageCounter.className='pageCounter';
pageHeader.appendChild(pageCounter);
let innerPage = document.createElement('div');
innerPage.innerHTML = data[i].text;
innerPage.className = 'innerPage';
innerPage.style.cssText = `
width: ${totalWidth}px;
transform: translateX(-${p * pageWidth}px);
`;
const pageContent = document.createElement('div');
pageContent.className = 'pageContent';
pageContent.appendChild(innerPage);
const page = document.createElement('div');
page.className = 'page';
page.appendChild(pageHeader);
page.appendChild(pageContent);
container.appendChild(page);
counter++;
}
}
content.remove();
}
generatePages();
Fiddle: https://jsfiddle.net/xsyb7h9g/

There is a new element in HTML5 that is similar to iframe, but it is more useful and you can use it to read pdf:
<embed src="Your link" type="application/pdf">
For more information about this element, you can read This passage
Also, I write a similar pdf-like page, the script may have small problems, but it can scroll.
<body style="background:rgba(100,100,100,0.5);">
<button style="position:fixed; width:20; height:20; left:80%; top:10%" onclick="Ms()">
X
</button>
<p style="position:fixed; width:60%; height:80%; left:20%; top:10% ;overflow:scroll; background:rgba(100,100,100,0.8)" id="p1">
test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>
</p>
<!--script language="javascript">
function close()
{
document.getElementById("p1").display: none;
}
</script-->
<script language="javascript">
function Ms() //声明标识符
{
//document.getElementById("p1").visibility=hidden;
document.getElementById("p1").innerHTML="I do not know why it can not be hidden.";
}

Is there a way to calculate how far you have scrolled inside a div with overflow set to auto?

I need to find out how far I have scrolled inside a div. I can't use the window property to find this value as the window hasn't scrolled. Is there a way to accomplish this?

It's not difficult to do:
Grab the element that scrolls
Set an event listener for scroll to that element
Get the element's scrollTop value
const scrollyDiv = document.getElementById('scrollyDiv');
scrollyDiv.addEventListener('scroll', (e) => {
console.log(e.target.scrollTop)
})
Demo:
https://codepen.io/koralarts/pen/LoXYmZ

You can do this with JQuery by using $(document).scrollTop() :
$(document).scroll(function() {
console.log($(document).scrollTop());
})

Answer:
In combination with the scroll event you can use the properties scrollTop(MDN), scrollHeight(MDN), and the computed CSS height.
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
note: we use the + operator to coerce the string returned by getComputedStyle and slice into a number. This is fine because we know exactly what we are getting (heights are always defined using px by default) and we know by slicing off px the value will always be a number. A more precise way of doing this if you're not sure of the returned value(a.e. rem) is to use a Regular Expression to remove non-numerals:
...
height = +getComputedStyle(e.currentTarget)["height"].replace(/\D/g, "");
what are these?
scrollTop is the distance scrolled from the top of the element. It starts at 0 and increments until you hit the scroll limit.
scrollHeight is the total distance, plus the original height of the element.
height is simply the height of the element.
Why is this important?
To determine how far you've scrolled you would use scrollTop out of (scrollHeight - height).
This is shown in the below example:
demo.addEventListener("scroll", function(e) {
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
console.log("Scrolled " + parseInt(scrollTop) + " / " + parseInt(scrollHeight - height));
});
html, body {
overflow: hidden;
}
div {
position: relative;
width: 50%;
left: calc(50% - 25%);
overflow: auto;
height: 101vh;
background: rgba(20,20,100, .3);
padding: 0px;
margin: 0px;
}
<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus mauris, molestie eu vehicula quis, suscipit quis nisl. Fusce lorem purus, rhoncus eget dui nec, sagittis tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam eget odio vitae nulla porttitor maximus a eget neque. Pellentesque dictum mollis ligula, a consequat tellus feugiat vitae. Donec rutrum elementum odio, vitae egestas tellus volutpat nec. Proin tempor, odio quis molestie iaculis, lectus nibh volutpat turpis, luctus rutrum ex felis sit amet velit. Donec blandit cursus tortor in malesuada. Vestibulum faucibus, lectus vel accumsan molestie, ligula velit pharetra leo, ac imperdiet nibh quam quis mi.
Pellentesque ac dui augue. Fusce sit amet condimentum dui. Donec sodales urna nec nisl commodo, ac porta magna consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tincidunt tellus nunc, at accumsan orci scelerisque sed. Suspendisse facilisis feugiat massa, quis egestas sapien tempus nec. Curabitur nunc ipsum, ultricies sit amet nibh sed, tincidunt tristique diam. Cras sit amet scelerisque leo, a blandit dolor. Cras lobortis leo nec est luctus molestie. Curabitur non arcu malesuada, tincidunt dolor quis, bibendum orci. Vestibulum lobortis tortor ac erat consequat, ut consequat ex consectetur. Maecenas finibus efficitur orci, sit amet gravida ipsum vestibulum a. Aliquam quis dictum mi. Vivamus sagittis fringilla quam, sed feugiat libero lobortis nec. Praesent suscipit nulla at mollis rutrum. Sed et lacus at quam feugiat varius vitae et lectus.
Suspendisse feugiat lacus eget risus elementum convallis. Vestibulum fringilla mi ac mollis sagittis. Suspendisse vel sem tincidunt, condimentum urna at, dignissim magna. Curabitur pulvinar lectus eu massa pharetra facilisis. Quisque est nisl, feugiat vitae pellentesque vel, hendrerit sed enim. Ut at dui eget eros rhoncus venenatis malesuada sit amet ligula. Pellentesque cursus vulputate egestas. Sed euismod sem vel felis sollicitudin faucibus. Cras aliquet viverra turpis sit amet pulvinar. Aliquam pellentesque dolor a pulvinar egestas. Curabitur in sagittis sapien. Vestibulum nec ipsum a risus porttitor rhoncus vitae id ex. Ut mollis, ligula eu sollicitudin commodo, nibh nibh bibendum mi, vel luctus tellus est eget eros.
Aenean congue diam id urna tincidunt consectetur. Nunc vel semper ligula. Sed ultrices, odio eu venenatis interdum, ligula velit volutpat nisl, et malesuada eros massa id ante. Sed malesuada non nisl quis imperdiet. Praesent porta fringilla fermentum. Integer id massa at orci mollis accumsan in et dolor. Nullam nisi lectus, dignissim a dapibus id, posuere sed ex. Praesent consequat, dui non imperdiet aliquam, magna diam rhoncus enim, id molestie mauris nunc eget ante. Morbi et laoreet sapien, tempor malesuada tellus. Pellentesque lectus leo, egestas eget faucibus vitae, dapibus non enim. Duis eu leo sit amet augue molestie laoreet eu ut ipsum. Vestibulum nulla enim, tempus id varius ut, egestas non elit.
Sed tincidunt lorem sed tellus lobortis vulputate. Aliquam vel accumsan massa, id ornare arcu. Phasellus non erat ut erat mollis placerat. Aliquam laoreet laoreet eros, in elementum ex maximus quis. Pellentesque in dui at purus efficitur mattis. Etiam consequat, nunc vel feugiat fringilla, ante enim aliquet tellus, nec dapibus dui justo eget nibh. Praesent enim leo, tincidunt a dictum et, mollis at neque.
Fusce maximus, enim sed congue tempus, lorem tellus hendrerit massa, eget eleifend augue nisi eget eros. Aliquam vehicula eu enim et interdum. Nullam sollicitudin nisl sapien, quis euismod dolor vestibulum eget. Curabitur consectetur, nulla quis scelerisque tincidunt, sem turpis sagittis lacus, at tincidunt nunc felis et velit. Quisque nec malesuada lectus. Cras a lorem fermentum, tincidunt dolor a, dictum eros. Suspendisse augue tellus, cursus et ex sit amet, cursus sodales nibh. Pellentesque quis lacus aliquam libero bibendum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eget justo nec velit ultrices porttitor. Aenean vel accumsan arcu, sit amet finibus eros.
Sed ut convallis tortor, non dictum odio. Cras eu dictum sem. Cras laoreet lectus quis sapien volutpat bibendum. Vivamus ut finibus magna. Nunc aliquet tincidunt blandit. Pellentesque nisl tortor, malesuada eu est sed, congue fermentum nibh. Curabitur eu tellus nibh. Mauris quis eleifend lacus, id lacinia erat. Suspendisse id purus mauris. Cras ornare neque ac nulla blandit, eget faucibus turpis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum mattis faucibus massa. Ut dignissim justo eget malesuada iaculis. Integer venenatis malesuada euismod. Nulla sollicitudin justo non consequat pharetra. Donec ultrices mi at neque tincidunt, in scelerisque sem vehicula.
Integer ac consectetur enim. Nunc sed fringilla magna. Nullam fermentum nisl nec venenatis condimentum. Mauris leo metus, convallis ut sem eu, tincidunt malesuada nunc. Cras metus lacus, sagittis ut convallis non, tempor vel turpis. Sed ultricies tristique odio id cursus. Praesent auctor ac ipsum faucibus ultrices. Donec id metus a sem aliquet suscipit. Maecenas mi sem, posuere non turpis id, vehicula placerat arcu. Curabitur tincidunt viverra neque ac pharetra. Curabitur vitae massa vehicula lorem tristique tempor. Duis congue nunc id lacus suscipit, ut laoreet enim malesuada.
Ut velit tellus, rhoncus a gravida id, aliquam quis dolor. Nam elementum purus non leo porttitor tempus. Curabitur tempor feugiat magna ac tempus. Ut cursus ultricies rutrum. Duis a feugiat arcu. Nullam bibendum metus sed nulla feugiat scelerisque vitae nec sem. Mauris aliquam vestibulum dui a commodo. Cras vel molestie metus. Quisque ac arcu odio. Phasellus pretium a leo non lacinia. Mauris et odio dui. Praesent commodo lorem eu erat pulvinar tincidunt. Praesent sagittis interdum mauris, eu egestas dolor volutpat dignissim. Duis posuere, arcu nec placerat ullamcorper, lectus nunc tempor mauris, vitae congue lacus arcu at enim.
Quisque eu massa sit amet dui accumsan pulvinar. Ut fermentum lectus eros, at iaculis enim consectetur quis. Ut semper, mi in vehicula lacinia, purus mi sagittis orci, rhoncus tristique magna leo vel purus. In congue feugiat arcu consequat pretium. Vestibulum sit amet pellentesque neque, a dignissim nisl. Maecenas ac dolor id justo feugiat varius vel sed turpis. Donec quis mi id nibh condimentum dictum. Mauris dapibus justo quam, ut fermentum diam ultrices et. Cras lobortis leo et finibus congue. Integer sed dui id mi efficitur efficitur. Quisque id gravida magna. Duis pharetra cursus metus vel pellentesque. Integer at magna ante. Donec aliquam nulla sem, at rhoncus ex tincidunt aliquam. Vestibulum sit amet hendrerit diam.
Mauris imperdiet dui eget massa malesuada mollis. Integer consectetur varius justo sit amet posuere. Aenean semper est at justo pulvinar finibus. Nunc ac maximus dui, a euismod orci. Mauris congue orci in ullamcorper pellentesque. Etiam tincidunt lorem id diam maximus elementum. Etiam in erat libero. Curabitur vehicula sodales mi, quis iaculis nulla consequat nec. Sed cursus lectus sed velit commodo, eu ultricies sapien pulvinar.
Nulla rutrum lacus est, vel lacinia ipsum euismod congue. Nunc vel vehicula orci. Sed eget nibh in dolor volutpat scelerisque. Ut porta viverra est, sed sollicitudin lorem euismod id. Proin interdum, lorem in luctus gravida, justo elit laoreet ante, nec malesuada diam mi ut lacus. Nunc nisl mi, hendrerit rutrum ligula id, auctor commodo ligula. Donec ullamcorper scelerisque sapien, vel feugiat justo molestie sed. Curabitur faucibus dignissim urna. Cras at sodales ante.
In varius, odio et feugiat hendrerit, lectus mauris faucibus mauris, at vulputate quam tellus vel sem. Fusce posuere turpis sem, porta imperdiet lorem feugiat a. Morbi iaculis dui nec accumsan scelerisque. Duis elit diam, fermentum non diam pretium, molestie venenatis nisl. Suspendisse faucibus dapibus ipsum nec placerat. Nulla sed pretium enim. Cras semper iaculis lacinia. Cras id vulputate orci, quis tristique ante. Phasellus nec suscipit tortor, viverra elementum augue.
Duis sed finibus dui. Nunc molestie vestibulum egestas. Sed in nisi dapibus, vehicula sem in, mattis orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut interdum lacus, id pulvinar risus. Donec blandit non sapien vitae gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed sit amet odio ut nulla consequat consectetur quis ut ipsum. Donec mollis sed neque quis luctus. Sed malesuada hendrerit tempor. Sed interdum maximus maximus. Cras placerat vel leo non fringilla. Praesent tincidunt semper malesuada. Vestibulum at tellus massa. Nulla nec lobortis urna. Duis lobortis pharetra odio, sed mattis quam congue non. Fusce elementum nisl metus, eget ultricies ex aliquet vel. Praesent fermentum tellus imperdiet rutrum fermentum. Donec mauris sapien, convallis non condimentum id, vehicula in diam. Nunc odio nisi, vehicula eu metus eu, lobortis faucibus sapien. Integer pulvinar maximus mauris, vel commodo est fringilla rhoncus.
Nam rutrum egestas molestie. Praesent urna odio, egestas quis ante in, rhoncus fermentum nisi. Ut pulvinar diam id tortor bibendum, mattis luctus nulla vulputate. Mauris arcu augue, imperdiet quis metus non, porttitor fringilla erat. Nulla vel venenatis elit, in placerat lectus. Fusce dui ante, commodo sit amet laoreet at, luctus quis ligula. In feugiat nibh a augue sollicitudin, eget pellentesque massa maximus. Aenean a velit id est cursus aliquam nec vel leo. Vestibulum non efficitur libero, non sodales felis. Cras a mauris eu metus mattis mollis. Integer ac nibh congue, iaculis arcu et, vestibulum ex. Sed vel orci blandit, blandit leo id, viverra enim. In lobortis diam sit amet risus cursus ultricies. Aliquam molestie porttitor velit, pellentesque placerat ligula pulvinar in. Vestibulum porta, est vitae elementum ultricies, turpis dolor lacinia nunc, id facilisis ante sem vehicula justo.
Nullam interdum sagittis ligula, id fringilla quam dignissim in. Vestibulum ac massa et lectus hendrerit finibus nec a lorem. Aenean at elementum enim, eu rhoncus purus. Maecenas porttitor sapien nec tristique rhoncus. Donec tortor velit, ultricies at posuere sed, laoreet sit amet nunc. In nulla magna, imperdiet ut ipsum eu, vehicula bibendum turpis. Etiam sed magna quis lectus tristique elementum. Aliquam felis nisi, varius eget turpis nec, volutpat tincidunt lectus. Donec elit massa, dapibus id velit eget, sodales vehicula ligula. Vestibulum varius libero lacinia auctor rhoncus. Aliquam placerat urna dolor, sit amet fringilla velit vehicula at. Nam quis nisl cursus, tempor eros quis, venenatis lorem.
Quisque a lectus in velit tincidunt sollicitudin a non sem. Proin feugiat orci et semper tempor. Nulla vulputate orci eu consectetur sagittis. Morbi auctor dui sit amet eros varius volutpat. Quisque in neque elit. Integer sollicitudin felis mattis, efficitur lorem et, vulputate odio. Etiam at augue ut libero tempus dapibus vitae varius purus. Sed in ipsum a neque faucibus placerat at ut eros. Etiam euismod eros nunc, sed vulputate purus dignissim id. Quisque egestas purus turpis, sed cursus sapien porttitor eget. Aliquam placerat neque eget nisl consectetur, et lobortis dolor congue. Vivamus tellus sapien, convallis quis vehicula at, ultricies nec quam. Phasellus arcu lacus, malesuada id est accumsan, ultricies viverra massa. Ut lorem sapien, lacinia sit amet metus id, vehicula vulputate eros. Aliquam lorem sapien, semper ac vehicula sit amet, efficitur sagittis lectus. Integer vel sapien aliquet, tempor augue ut, molestie libero.
</div>
Aside: How do I get percentages?
You would simply modify the above formula from:
scrollHeight - height
To:
scrollTop / ( scrollHeight - height) * 100
Percentage Example:
demo.addEventListener("scroll", function(e) {
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
console.log("Scrolled " + parseInt((parseInt(scrollTop) / parseInt(scrollHeight - height)) * 100) + "% / 100% ");
});
html, body {
overflow: hidden;
}
div {
position: relative;
width: 50%;
left: calc(50% - 25%);
overflow: auto;
height: 101vh;
background: rgba(20,20,100, .3);
padding: 0px;
margin: 0px;
}
<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus mauris, molestie eu vehicula quis, suscipit quis nisl. Fusce lorem purus, rhoncus eget dui nec, sagittis tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam eget odio vitae nulla porttitor maximus a eget neque. Pellentesque dictum mollis ligula, a consequat tellus feugiat vitae. Donec rutrum elementum odio, vitae egestas tellus volutpat nec. Proin tempor, odio quis molestie iaculis, lectus nibh volutpat turpis, luctus rutrum ex felis sit amet velit. Donec blandit cursus tortor in malesuada. Vestibulum faucibus, lectus vel accumsan molestie, ligula velit pharetra leo, ac imperdiet nibh quam quis mi.
Pellentesque ac dui augue. Fusce sit amet condimentum dui. Donec sodales urna nec nisl commodo, ac porta magna consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tincidunt tellus nunc, at accumsan orci scelerisque sed. Suspendisse facilisis feugiat massa, quis egestas sapien tempus nec. Curabitur nunc ipsum, ultricies sit amet nibh sed, tincidunt tristique diam. Cras sit amet scelerisque leo, a blandit dolor. Cras lobortis leo nec est luctus molestie. Curabitur non arcu malesuada, tincidunt dolor quis, bibendum orci. Vestibulum lobortis tortor ac erat consequat, ut consequat ex consectetur. Maecenas finibus efficitur orci, sit amet gravida ipsum vestibulum a. Aliquam quis dictum mi. Vivamus sagittis fringilla quam, sed feugiat libero lobortis nec. Praesent suscipit nulla at mollis rutrum. Sed et lacus at quam feugiat varius vitae et lectus.
Suspendisse feugiat lacus eget risus elementum convallis. Vestibulum fringilla mi ac mollis sagittis. Suspendisse vel sem tincidunt, condimentum urna at, dignissim magna. Curabitur pulvinar lectus eu massa pharetra facilisis. Quisque est nisl, feugiat vitae pellentesque vel, hendrerit sed enim. Ut at dui eget eros rhoncus venenatis malesuada sit amet ligula. Pellentesque cursus vulputate egestas. Sed euismod sem vel felis sollicitudin faucibus. Cras aliquet viverra turpis sit amet pulvinar. Aliquam pellentesque dolor a pulvinar egestas. Curabitur in sagittis sapien. Vestibulum nec ipsum a risus porttitor rhoncus vitae id ex. Ut mollis, ligula eu sollicitudin commodo, nibh nibh bibendum mi, vel luctus tellus est eget eros.
Aenean congue diam id urna tincidunt consectetur. Nunc vel semper ligula. Sed ultrices, odio eu venenatis interdum, ligula velit volutpat nisl, et malesuada eros massa id ante. Sed malesuada non nisl quis imperdiet. Praesent porta fringilla fermentum. Integer id massa at orci mollis accumsan in et dolor. Nullam nisi lectus, dignissim a dapibus id, posuere sed ex. Praesent consequat, dui non imperdiet aliquam, magna diam rhoncus enim, id molestie mauris nunc eget ante. Morbi et laoreet sapien, tempor malesuada tellus. Pellentesque lectus leo, egestas eget faucibus vitae, dapibus non enim. Duis eu leo sit amet augue molestie laoreet eu ut ipsum. Vestibulum nulla enim, tempus id varius ut, egestas non elit.
Sed tincidunt lorem sed tellus lobortis vulputate. Aliquam vel accumsan massa, id ornare arcu. Phasellus non erat ut erat mollis placerat. Aliquam laoreet laoreet eros, in elementum ex maximus quis. Pellentesque in dui at purus efficitur mattis. Etiam consequat, nunc vel feugiat fringilla, ante enim aliquet tellus, nec dapibus dui justo eget nibh. Praesent enim leo, tincidunt a dictum et, mollis at neque.
Fusce maximus, enim sed congue tempus, lorem tellus hendrerit massa, eget eleifend augue nisi eget eros. Aliquam vehicula eu enim et interdum. Nullam sollicitudin nisl sapien, quis euismod dolor vestibulum eget. Curabitur consectetur, nulla quis scelerisque tincidunt, sem turpis sagittis lacus, at tincidunt nunc felis et velit. Quisque nec malesuada lectus. Cras a lorem fermentum, tincidunt dolor a, dictum eros. Suspendisse augue tellus, cursus et ex sit amet, cursus sodales nibh. Pellentesque quis lacus aliquam libero bibendum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eget justo nec velit ultrices porttitor. Aenean vel accumsan arcu, sit amet finibus eros.
Sed ut convallis tortor, non dictum odio. Cras eu dictum sem. Cras laoreet lectus quis sapien volutpat bibendum. Vivamus ut finibus magna. Nunc aliquet tincidunt blandit. Pellentesque nisl tortor, malesuada eu est sed, congue fermentum nibh. Curabitur eu tellus nibh. Mauris quis eleifend lacus, id lacinia erat. Suspendisse id purus mauris. Cras ornare neque ac nulla blandit, eget faucibus turpis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum mattis faucibus massa. Ut dignissim justo eget malesuada iaculis. Integer venenatis malesuada euismod. Nulla sollicitudin justo non consequat pharetra. Donec ultrices mi at neque tincidunt, in scelerisque sem vehicula.
Integer ac consectetur enim. Nunc sed fringilla magna. Nullam fermentum nisl nec venenatis condimentum. Mauris leo metus, convallis ut sem eu, tincidunt malesuada nunc. Cras metus lacus, sagittis ut convallis non, tempor vel turpis. Sed ultricies tristique odio id cursus. Praesent auctor ac ipsum faucibus ultrices. Donec id metus a sem aliquet suscipit. Maecenas mi sem, posuere non turpis id, vehicula placerat arcu. Curabitur tincidunt viverra neque ac pharetra. Curabitur vitae massa vehicula lorem tristique tempor. Duis congue nunc id lacus suscipit, ut laoreet enim malesuada.
Ut velit tellus, rhoncus a gravida id, aliquam quis dolor. Nam elementum purus non leo porttitor tempus. Curabitur tempor feugiat magna ac tempus. Ut cursus ultricies rutrum. Duis a feugiat arcu. Nullam bibendum metus sed nulla feugiat scelerisque vitae nec sem. Mauris aliquam vestibulum dui a commodo. Cras vel molestie metus. Quisque ac arcu odio. Phasellus pretium a leo non lacinia. Mauris et odio dui. Praesent commodo lorem eu erat pulvinar tincidunt. Praesent sagittis interdum mauris, eu egestas dolor volutpat dignissim. Duis posuere, arcu nec placerat ullamcorper, lectus nunc tempor mauris, vitae congue lacus arcu at enim.
Quisque eu massa sit amet dui accumsan pulvinar. Ut fermentum lectus eros, at iaculis enim consectetur quis. Ut semper, mi in vehicula lacinia, purus mi sagittis orci, rhoncus tristique magna leo vel purus. In congue feugiat arcu consequat pretium. Vestibulum sit amet pellentesque neque, a dignissim nisl. Maecenas ac dolor id justo feugiat varius vel sed turpis. Donec quis mi id nibh condimentum dictum. Mauris dapibus justo quam, ut fermentum diam ultrices et. Cras lobortis leo et finibus congue. Integer sed dui id mi efficitur efficitur. Quisque id gravida magna. Duis pharetra cursus metus vel pellentesque. Integer at magna ante. Donec aliquam nulla sem, at rhoncus ex tincidunt aliquam. Vestibulum sit amet hendrerit diam.
Mauris imperdiet dui eget massa malesuada mollis. Integer consectetur varius justo sit amet posuere. Aenean semper est at justo pulvinar finibus. Nunc ac maximus dui, a euismod orci. Mauris congue orci in ullamcorper pellentesque. Etiam tincidunt lorem id diam maximus elementum. Etiam in erat libero. Curabitur vehicula sodales mi, quis iaculis nulla consequat nec. Sed cursus lectus sed velit commodo, eu ultricies sapien pulvinar.
Nulla rutrum lacus est, vel lacinia ipsum euismod congue. Nunc vel vehicula orci. Sed eget nibh in dolor volutpat scelerisque. Ut porta viverra est, sed sollicitudin lorem euismod id. Proin interdum, lorem in luctus gravida, justo elit laoreet ante, nec malesuada diam mi ut lacus. Nunc nisl mi, hendrerit rutrum ligula id, auctor commodo ligula. Donec ullamcorper scelerisque sapien, vel feugiat justo molestie sed. Curabitur faucibus dignissim urna. Cras at sodales ante.
In varius, odio et feugiat hendrerit, lectus mauris faucibus mauris, at vulputate quam tellus vel sem. Fusce posuere turpis sem, porta imperdiet lorem feugiat a. Morbi iaculis dui nec accumsan scelerisque. Duis elit diam, fermentum non diam pretium, molestie venenatis nisl. Suspendisse faucibus dapibus ipsum nec placerat. Nulla sed pretium enim. Cras semper iaculis lacinia. Cras id vulputate orci, quis tristique ante. Phasellus nec suscipit tortor, viverra elementum augue.
Duis sed finibus dui. Nunc molestie vestibulum egestas. Sed in nisi dapibus, vehicula sem in, mattis orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut interdum lacus, id pulvinar risus. Donec blandit non sapien vitae gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed sit amet odio ut nulla consequat consectetur quis ut ipsum. Donec mollis sed neque quis luctus. Sed malesuada hendrerit tempor. Sed interdum maximus maximus. Cras placerat vel leo non fringilla. Praesent tincidunt semper malesuada. Vestibulum at tellus massa. Nulla nec lobortis urna. Duis lobortis pharetra odio, sed mattis quam congue non. Fusce elementum nisl metus, eget ultricies ex aliquet vel. Praesent fermentum tellus imperdiet rutrum fermentum. Donec mauris sapien, convallis non condimentum id, vehicula in diam. Nunc odio nisi, vehicula eu metus eu, lobortis faucibus sapien. Integer pulvinar maximus mauris, vel commodo est fringilla rhoncus.
Nam rutrum egestas molestie. Praesent urna odio, egestas quis ante in, rhoncus fermentum nisi. Ut pulvinar diam id tortor bibendum, mattis luctus nulla vulputate. Mauris arcu augue, imperdiet quis metus non, porttitor fringilla erat. Nulla vel venenatis elit, in placerat lectus. Fusce dui ante, commodo sit amet laoreet at, luctus quis ligula. In feugiat nibh a augue sollicitudin, eget pellentesque massa maximus. Aenean a velit id est cursus aliquam nec vel leo. Vestibulum non efficitur libero, non sodales felis. Cras a mauris eu metus mattis mollis. Integer ac nibh congue, iaculis arcu et, vestibulum ex. Sed vel orci blandit, blandit leo id, viverra enim. In lobortis diam sit amet risus cursus ultricies. Aliquam molestie porttitor velit, pellentesque placerat ligula pulvinar in. Vestibulum porta, est vitae elementum ultricies, turpis dolor lacinia nunc, id facilisis ante sem vehicula justo.
Nullam interdum sagittis ligula, id fringilla quam dignissim in. Vestibulum ac massa et lectus hendrerit finibus nec a lorem. Aenean at elementum enim, eu rhoncus purus. Maecenas porttitor sapien nec tristique rhoncus. Donec tortor velit, ultricies at posuere sed, laoreet sit amet nunc. In nulla magna, imperdiet ut ipsum eu, vehicula bibendum turpis. Etiam sed magna quis lectus tristique elementum. Aliquam felis nisi, varius eget turpis nec, volutpat tincidunt lectus. Donec elit massa, dapibus id velit eget, sodales vehicula ligula. Vestibulum varius libero lacinia auctor rhoncus. Aliquam placerat urna dolor, sit amet fringilla velit vehicula at. Nam quis nisl cursus, tempor eros quis, venenatis lorem.
Quisque a lectus in velit tincidunt sollicitudin a non sem. Proin feugiat orci et semper tempor. Nulla vulputate orci eu consectetur sagittis. Morbi auctor dui sit amet eros varius volutpat. Quisque in neque elit. Integer sollicitudin felis mattis, efficitur lorem et, vulputate odio. Etiam at augue ut libero tempus dapibus vitae varius purus. Sed in ipsum a neque faucibus placerat at ut eros. Etiam euismod eros nunc, sed vulputate purus dignissim id. Quisque egestas purus turpis, sed cursus sapien porttitor eget. Aliquam placerat neque eget nisl consectetur, et lobortis dolor congue. Vivamus tellus sapien, convallis quis vehicula at, ultricies nec quam. Phasellus arcu lacus, malesuada id est accumsan, ultricies viverra massa. Ut lorem sapien, lacinia sit amet metus id, vehicula vulputate eros. Aliquam lorem sapien, semper ac vehicula sit amet, efficitur sagittis lectus. Integer vel sapien aliquet, tempor augue ut, molestie libero.
</div>

Pan and zoomable view container in html

I want to have a <div> as a pan-zoomable view that has some other HTML elements like images, other divs and etc in it. I saw many examples and implements on the internet, but those are using canvas or SVG.
In my case, I don't wanna use canvas to add HTML elements in it, cause the inner elements have some js behaviors that I can't implement them on canvas.
Note that I don't wanna make my inner elements draggable, zoomable or something like that, I just want my entire view to be pan-zoomable. Imagine a 500*500 <div> that shows a 1500*1000 <div> with some elements in it. Something like google map that has HTML elements inside.

Use rem units for all element's dimensions in your zoomable view. rem is root em, i.e. font-size of html tag (i.e. root). And then change font-size of html tag to zoom.
But don't use this units for the other blocks you don't want to zoom.
Demo:
html {
font-size: 10px;
}
.resizable {
/* 30 * 10px = 300px */
width: 30rem;
/* 12 * 10px = 120px */
height: 12rem;
/* 0.25 * 10px = 4px */
border: 0.25rem solid orange;
font-size: 1.5rem;
}
img {
display: block;
/* 15 * 10px = 150px */
width: 15rem;
/* 8 * 10px = 80px */
height: 8rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) - 1)">
-
</button>
<button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) + 1)">
+
</button>
<div class="resizable">
This is resizable text and resizable image
<img src="https://i.stack.imgur.com/uubYJ.jpg" />
</div>
Also you can consider using em units if you can cope with calculating proper sizing or you don't have to set different font-size values in element hierarchy.

You can apply transform: scale with some zoom value for this view to zoom. If you want to display 1500x1000 view in 500x500 zoomable view you should use transform: scale(0.33, 0.5). Demo:
.zoomable {
width: 500px;
height: 500px;
}
.zoomed {
width: 1500px;
height: 1000px;
overflow: hidden;
transform: scale(0.33, 0.5);
/* to move transformed elements to top left corner */
transform-origin: 0 0;
}
<div class="zoomable">
<div class="zoomed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius dignissim urna, finibus vulputate mi egestas eu. Etiam non eros lacinia, molestie diam in, facilisis purus. Morbi sed risus sodales, elementum neque quis, volutpat lectus. Nullam
neque mauris, iaculis quis felis sed, luctus tempus nunc. Maecenas est nulla, tempor sed dictum at, faucibus a sapien. Pellentesque vitae libero urna. Ut porta placerat malesuada. Sed aliquam et risus a laoreet. Nunc vel lacus vel lectus placerat
pellentesque. Mauris lobortis ante vel mauris tincidunt, ut accumsan magna cursus. Phasellus ante dolor, mollis id congue ut, rhoncus porta augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque placerat nibh eget feugiat tempor.
Nam pellentesque ullamcorper elit eu sodales. Aliquam at mi vel metus condimentum condimentum sed eu tortor. In hac habitasse platea dictumst. Donec consequat sapien non dui finibus, sit amet laoreet arcu vehicula. Sed a dui et massa commodo commodo
ut nec augue. Sed suscipit nibh nec nisl facilisis, nec finibus diam ullamcorper. Mauris bibendum commodo turpis eu fermentum. Sed porta, lectus sit amet pulvinar auctor, ante urna dignissim mauris, hendrerit suscipit magna dui in urna. Quisque convallis
tellus et semper iaculis. Mauris fringilla velit in magna tempor bibendum. Aenean ultricies at justo vitae congue. Pellentesque a purus sed justo semper bibendum. Nunc ut tortor quis eros laoreet gravida maximus sit amet lacus. Mauris vel consequat
ipsum, in vehicula eros. Duis enim dolor, convallis sed nunc nec, scelerisque tempus ligula. Nullam consequat velit sit amet risus congue, nec condimentum lacus bibendum. Aliquam ornare justo nec nunc eleifend, tristique condimentum nulla vulputate.
Donec id orci turpis. Donec porta rutrum massa ac aliquam. In eu ante sed odio dapibus congue. Aliquam tempus nisi nec porta tempus. Aliquam quam augue, commodo at tortor vitae, condimentum eleifend massa. Ut sollicitudin, nunc eget pretium ullamcorper,
nibh tellus imperdiet enim, at tincidunt nisi metus vel diam. Morbi volutpat velit magna, eu facilisis est luctus volutpat. Maecenas volutpat metus quis elit tristique, non sollicitudin tortor iaculis. Mauris a purus leo. Pellentesque eu mauris sit
amet est mollis cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam pellentesque cursus mattis. Suspendisse varius elit vitae scelerisque consectetur. Quisque finibus quam quis lacus dignissim, vestibulum
aliquam erat pulvinar. Ut risus nisi, ultrices eu purus eget, scelerisque tempor ex. Nam pretium placerat orci ut pharetra. Pellentesque sit amet tincidunt orci. Maecenas laoreet porttitor volutpat. Cras vitae mauris mauris. Sed a lacus id felis efficitur
pellentesque. Nulla facilisi. Integer urna nibh, feugiat commodo lectus at, commodo vehicula arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla mauris lectus, ultricies et elit vel, feugiat ultrices
sem. Nunc imperdiet sed erat et imperdiet. Donec non tincidunt nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultricies, massa sit amet congue rhoncus, augue nibh imperdiet eros, vitae ornare risus
ante id magna. Suspendisse ac leo nulla. Praesent eu ex rhoncus, scelerisque sem sed, porta leo. Sed faucibus, velit placerat lacinia iaculis, turpis libero convallis lacus, eu mattis ante lectus non urna. Fusce semper sodales urna non sodales. Nunc
ex sapien, ultrices eget dolor sit amet, vestibulum aliquet mi. Aliquam bibendum mollis odio. Phasellus porta commodo est nec placerat. Sed faucibus sapien id enim dignissim, non ullamcorper eros cursus. Integer auctor eu quam ac mollis. Suspendisse
et nisl lectus. Phasellus purus erat, aliquet et neque in, aliquet posuere sapien. Phasellus eget purus iaculis tortor porta maximus ut non est. Cras ac euismod elit. Vivamus interdum odio sit amet gravida sollicitudin. Cras sed elit vel magna rhoncus
consectetur ut a ante. Nullam pulvinar convallis nisi quis maximus. Sed ullamcorper neque at luctus efficitur. Donec ligula ex, auctor id magna sed, tempor maximus sapien. Etiam rhoncus, felis sed fringilla pellentesque, justo sapien hendrerit odio,
eget tincidunt urna magna ac orci. Nam pharetra vitae eros non bibendum. Nulla sit amet ligula quis massa aliquet auctor. Praesent id eros non odio ultricies venenatis a ac metus. Sed ante justo, gravida id ipsum tempor, dignissim dapibus ligula.
Nulla vulputate cursus fringilla. Ut ultricies ornare quam. Vivamus ac malesuada felis, ac laoreet velit. Curabitur ut nisl pulvinar orci placerat sagittis convallis id elit. Mauris vitae lacus quis metus porta viverra. Nam porttitor neque ipsum,
et tincidunt nisi interdum a. Suspendisse potenti. Donec lacinia convallis maximus. Suspendisse bibendum nisl ex, nec eleifend magna ornare in. Praesent diam orci, iaculis quis nunc sit amet, mattis rutrum lorem. Maecenas bibendum vel eros non imperdiet.
Etiam accumsan sem sit amet orci porta, auctor ultricies elit posuere. Curabitur leo mauris, tempus et elementum non, malesuada et velit. Phasellus in tellus vitae diam placerat condimentum vitae quis neque. Maecenas nec eros eget tellus sollicitudin
fermentum a nec magna. Phasellus sagittis nunc a convallis suscipit. Quisque cursus, dui vitae sollicitudin pulvinar, sem velit rutrum enim, nec dictum lectus dolor nec augue. Nam volutpat metus et semper ultrices. Sed faucibus purus turpis, vel placerat
arcu posuere in. Mauris a scelerisque ex. Quisque eget pellentesque est. Cras vitae eros sit amet urna interdum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porttitor nibh vitae metus
varius lobortis. Phasellus vitae vehicula justo. Sed blandit, mi ac scelerisque hendrerit, massa eros ullamcorper orci, ac finibus magna felis nec neque. Proin sollicitudin tristique ante blandit tempus. Proin eget placerat eros. Donec dignissim,
ligula id hendrerit aliquam, turpis neque pellentesque ligula, nec volutpat dui nisi ac sapien. Nulla rhoncus neque quis sollicitudin venenatis. Nullam sed dapibus nunc. Suspendisse porta cursus scelerisque. In maximus nisl vitae fermentum molestie.
Cras a diam quis sem scelerisque molestie. Maecenas iaculis aliquam nibh, auctor imperdiet metus fermentum in. Pellentesque ac dui ornare, blandit ipsum nec, placerat ante. Morbi gravida varius ex. Proin efficitur molestie placerat. Nunc suscipit
arcu eu dui ultricies accumsan. Aliquam quis ex in neque hendrerit porttitor. Donec luctus lorem lorem, quis tempor dolor gravida vel. Nulla eget nisi metus. Curabitur maximus ante arcu, id ultrices arcu pharetra nec. Donec erat arcu, vulputate a
felis in, aliquet venenatis augue. Nulla sollicitudin in ligula vel ornare. Duis tempor mi et turpis viverra faucibus nec in ante. Cras laoreet mauris at nunc vehicula, eu accumsan ligula eleifend. Mauris vestibulum cursus nunc nec ornare. Morbi nec
eros orci. Curabitur et dolor gravida elit volutpat pharetra. Nulla dapibus ultrices quam, ut scelerisque odio euismod et. Aliquam consequat nisi at mauris aliquet vehicula. Proin lorem leo, consectetur scelerisque tempus et, sollicitudin nec ipsum.
Nullam laoreet lectus vitae justo blandit porttitor. Sed et tristique enim. Phasellus nisi mauris, rutrum nec erat nec, scelerisque finibus erat. Sed euismod, diam sed scelerisque aliquet, lectus ante congue dolor, nec commodo nisi massa et turpis.
Ut vestibulum, mi a faucibus venenatis, mi justo mollis sapien, non feugiat tellus sem id justo. Vivamus consectetur lorem et volutpat volutpat. In dapibus tempor metus id euismod. Nunc eu ligula hendrerit, convallis risus a, varius orci. Mauris sed
vehicula velit, in rutrum tellus. Etiam venenatis aliquet vulputate. Nunc suscipit viverra consequat. Pellentesque venenatis finibus velit, nec ultricies lorem aliquam vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse
platea dictumst. Nam dictum interdum mattis. Nunc cursus erat ut nisl sollicitudin, a malesuada ipsum rutrum. Maecenas vulputate ligula et ligula tempor accumsan. Nam dictum mi ligula, vel commodo elit rutrum nec. Donec feugiat imperdiet sem sed posuere.
Nunc convallis egestas lorem vel auctor. Donec et magna at augue rutrum efficitur et non est. In a placerat mi. Nunc in molestie mauris. Quisque efficitur orci a lorem finibus porta. Proin semper nec quam ac posuere. Sed egestas nisl ac nibh egestas,
ac efficitur mauris sagittis. Nam id tincidunt tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eget libero porta libero venenatis pharetra sit amet at leo. Ut efficitur, elit et elementum iaculis, mauris ligula sollicitudin
tellus, in feugiat elit urna in quam. Sed vitae nisi eu nisi congue vehicula. Duis eget tincidunt lorem. Ut sem augue, fringilla quis eros ut, tempor vulputate arcu. Aenean facilisis consequat lectus in tempor. Suspendisse aliquet sagittis mauris
id efficitur. Nam aliquam purus id lectus viverra luctus. Ut sagittis, leo cursus consequat fringilla, sem nisl interdum ipsum, ut imperdiet sapien ligula eget nisi. Aliquam eget suscipit nisi. Nunc vel lorem sed augue convallis rutrum ac quis arcu.
Nullam eu mi rhoncus, pretium leo at, luctus turpis. Etiam eget dolor et risus placerat facilisis nec quis tellus. Fusce vestibulum a felis at facilisis. Nulla sit amet est tortor. Suspendisse potenti. Donec aliquam magna vel tincidunt tempus. Quisque
et nunc massa. Aliquam ultrices, metus eget pretium varius, massa ex vulputate dui, at ornare massa tortor eu urna. Vestibulum semper mi a consequat porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc
pharetra varius mauris. In efficitur, lorem a commodo pharetra, risus lectus pulvinar felis, at pharetra turpis ligula quis sem. Phasellus bibendum, ex sit amet convallis gravida, sapien sapien iaculis dolor, nec iaculis mi elit ut justo. Integer
est sem, finibus vel ultrices id, ultrices eget leo. Cras luctus sapien sit amet mollis sollicitudin. Nam a turpis ac nisl blandit maximus. Etiam venenatis gravida mi, a fermentum elit congue eget. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Proin ullamcorper ex eget turpis ornare porttitor. Proin ullamcorper egestas nunc eget viverra. Proin ornare dui vel egestas vehicula. Aenean sem metus, convallis eget felis vel, rhoncus laoreet elit. Cras ut orci a nisi suscipit consectetur.
Quisque laoreet, mi ac egestas imperdiet, arcu lectus tempus dui, non semper tellus orci eu massa. Etiam quis enim nec purus tempor dapibus. Integer laoreet dui nec vulputate commodo. Praesent facilisis leo iaculis sollicitudin commodo. In non nibh
nec quam sollicitudin facilisis. Morbi ut elementum dui. Ut imperdiet semper dui eget hendrerit. Proin hendrerit egestas faucibus. Maecenas faucibus velit vel mauris volutpat, non vehicula dolor suscipit. Integer magna odio, feugiat nec libero eget,
porta ultrices magna. Sed in tristique turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ac tortor tellus. Nam placerat nulla non odio convallis ullamcorper. Fusce odio nibh, rutrum a ultricies
in, venenatis et orci. Pellentesque dictum quis lectus ac congue. Maecenas eleifend quis lorem ullamcorper elementum. Fusce velit leo, fringilla eu congue ut, blandit et est. Fusce sed lacus quis metus maximus molestie. Curabitur euismod turpis in
ante consequat aliquam a a ante. Mauris lectus nunc, laoreet id libero eu, feugiat vehicula est. Maecenas maximus, ligula ut rutrum mattis, elit nisl vulputate neque, ut condimentum augue est at libero. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Mauris faucibus purus eu ante aliquam finibus. Nunc nunc diam, euismod quis sem at, pulvinar porttitor lacus. Phasellus varius metus in mattis pellentesque. Nunc id quam ex.
</div>
</div>

Window Scroll listener for multiple divs at once?

So I'd like to build an indicator in a fixed nav bar that shows a user which section of a page they are on, and changes appropriately as they scroll, essentially recreating this Bootstrap effect.
Here's what I have so far:
HTML
<li class='page-nav' data-dest='thing1'><a>Event Info</a></li>
<li class='page-nav' data-dest='thing2'><a>Venue</a></li>
JS
var sections = [];
$('.page-nav').each(function() {
var destination = $(this).data('dest');
sections.push('#'+destination);
})
This gives me an array like this:
["#thing1", "#thing2"]
How could I then write a window.scroll function to watch if any of the DOM elements from the array enter scrollspy? Something like:
$(window).scroll(function () {
($(any-of-the-sections).on('scrollSpy:enter', function() {
$(whichever-section-entered).addClass('active');
})
})

Try the following:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li class='page-nav' data-dest='thing1'>Event Info</li>
<li class='page-nav' data-dest='thing2'>Venue</li>
</ul>
<hr>
<div id="thing1">
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
<p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
<p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
</div>
<hr>
<div id="thing2">
<p>Mauris in lacus metus. Sed vitae aliquet ligula. Sed eget arcu ornare lacus efficitur interdum quis at dui. Cras rhoncus, odio eget ultricies sollicitudin, sem sapien scelerisque leo, sit amet auctor nibh risus at erat. Sed vitae metus pretium neque porttitor sollicitudin pellentesque laoreet lacus. Donec luctus tellus et maximus venenatis. Nulla eget aliquet nulla, aliquet cursus purus. In viverra erat a pharetra egestas. In id faucibus velit, et sagittis ex. Aliquam ut semper nunc. Sed id tempus nisl. Nunc tincidunt porta velit, sit amet sagittis velit porttitor ut. Cras feugiat pulvinar augue in consectetur. Praesent quis nisl purus. Suspendisse aliquet metus eros, a aliquet risus viverra consectetur. Aliquam a nulla sit amet erat iaculis facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
<p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
<p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="scrollspy.js"></script>
<script>
var sections = [];
$('.page-nav').each(function() {
var destination = $(this).data('dest');
sections.push('#'+destination);
});
$.each(sections, function(index, value) {
var section = $(sections[index]);
$(section).scrollSpy();
$(section).on('scrollSpy:enter', function() {
$(this).addClass('active');
});
$(section).on('scrollSpy:exit', function() {
$(this).removeClass('active');
});
});
</script>
</body>
</html>
In the above code, it's possible for more than one section to be active at any given time. Just because #thing2 has become visible doesn't mean that #thing1 has necessarily scrolled outside of the viewport yet.
If you want to ensure that only one section has the active class at any given time, then you can delete the scrollSpy:exit event handler and modify the scrollSpy:enter event handler to look like this:
$(section).on('scrollSpy:enter', function() {
$.each(sections, function(index, value) {
$(sections[index]).removeClass('active');
});
$(this).addClass('active');
});
In this modified version of the code, when a section scrolls into view, we remove the active class from every section before adding it to the one that has scrolled into view.

loading data by scrolling using javascript

I am displaying data on my page and when i click on load more data button it will load more data on the same page below the data that was already displayed. I want to convert this feature so that more data will be loaded as the user scrolls down the page rather than clicking on load more data. Here is what i have and what i have attempted.
html view
<section id="rosterImages">
<section id="users">
<div id="nameImage">
<figure id="content" class="thumbnail">
<img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a>
</figcaption>
</figure>
</div>
</section>
</section>
Javascript Scroll
$(window).scroll(function (e) {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {
$('#users').append(Next());
}
});
Next method
Next = function () {
var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
$.views.Roster.ViewModel.CurrentPage(_page);
$.views.Roster.GetPage("/api/Roster", 9, _page);
};
the next method works if i link it up to a button but not with a scroll.

We just implemented something similar and our method was almost like the other answer except for the check to see if you had actually reached the end of the page
<script>
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
//-10 makes it such that you don't have to scroll all the way to the bottom
//can be adjusted as needed for footers, etc,
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
alert('Scrolling should be called now');
$('#users').append(Next());
}
});
</script>

Is it fine if you try loading data when User Scroll's to END of the PAGE,
Then you can possibly try :-
<script>
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert('Just checking if End of the Scroll Works');
$('#users').append(Next());
}
});
</script>
[Updated]
I tried the same with $(document).ready(function () {));, and it works like charm:-
$(document).ready(function () {
// Handler for .ready() called.
$(window).scroll(function () {
alert("Scrollbar Initiated");
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("Scrollbar appended");
$('#users').append(Next());
}
});
});
The complete code which I tried was something like below:-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function () {
// Handler for .ready() called.
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("Scrollbar appended");
$('#users').append(Next());
}
});
Next = function () {
var text = "..............Appended to Lipsum......................";
return text;
};
});
</script>
<body>
<div id="users">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed tellus mauris, non tincidunt libero. Nullam eros tellus, posuere sit amet tempus laoreet, mattis fringilla nisl. Maecenas commodo arcu ac mauris sagittis nec iaculis justo vulputate. Nulla eros justo, consectetur fringilla iaculis gravida, eleifend quis metus. Suspendisse ut ante justo. Proin mollis pellentesque elit, in eleifend erat rhoncus vel. Aenean magna odio, pharetra in rhoncus et, venenatis sed nunc. Mauris convallis, nunc et gravida sagittis, leo urna porttitor lacus, vel pellentesque felis arcu eu metus. Suspendisse eget neque id risus pharetra sollicitudin.
</p>
<p>
Fusce fermentum sollicitudin neque eu vestibulum. Donec adipiscing fermentum varius. Ut ut libero lacus, ut viverra dolor. Praesent bibendum elementum dui at consequat. Pellentesque pulvinar, lacus eu auctor aliquet, mi eros egestas orci, sit amet condimentum erat tortor nec felis. Aliquam erat volutpat. Donec fermentum molestie tempor. Donec non facilisis metus. Nam convallis tempor ipsum in scelerisque. Mauris cursus metus sed justo pretium fringilla. Nulla cursus scelerisque tellus vel ornare. Etiam sit amet sapien diam, ut commodo mi. Vestibulum nec enim id metus feugiat aliquet. Integer varius faucibus odio vel eleifend. Nunc convallis lectus at quam consequat ac accumsan nunc sodales.
</p>
<p>
Nunc elementum augue quis velit hendrerit vel aliquam dui porta. Pellentesque sollicitudin tincidunt elit ac cursus. Sed iaculis, magna facilisis tincidunt ultricies, risus augue semper est, sit amet cursus lectus arcu iaculis elit. Nullam in massa felis, sit amet tempus urna. Vestibulum condimentum urna quis tortor volutpat sodales. Nullam sed nisl est, eget pulvinar elit. Pellentesque sagittis congue urna, nec molestie quam lacinia nec. Ut rhoncus fringilla tellus, eget molestie nibh mattis quis. Nunc nec purus elit. Cras vitae felis ac arcu iaculis egestas. Pellentesque aliquet, urna et ultrices porta, metus arcu consequat neque, quis vehicula quam magna sed risus. Nulla a nunc neque, sed fermentum risus. Vestibulum pellentesque elementum suscipit. Nulla dolor massa, lacinia vel vulputate ac, eleifend eu odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lacinia justo in ante ornare consequat.
</p>
<p>
Sed dapibus quam ut augue luctus rhoncus. Aliquam cursus semper velit ac feugiat. Nullam erat magna, adipiscing id pharetra vel, elementum ut odio. Phasellus facilisis, justo id adipiscing posuere, lectus tellus vehicula nunc, nec vulputate elit ligula vitae nisi. Nunc tristique velit et turpis viverra vel condimentum nibh varius. Vivamus magna ante, adipiscing et iaculis sed, rutrum sit amet diam. Nunc semper orci non risus rutrum eget ullamcorper nulla volutpat. Suspendisse auctor quam vitae nisl blandit vulputate. Praesent justo mi, condimentum non malesuada sit amet, molestie ac massa. Phasellus dictum tincidunt massa, sed dictum urna rutrum id. Praesent eu gravida risus.
</p>
<p>
Nullam et neque tortor, ut accumsan nisl. Nullam pulvinar fermentum velit, eu tristique arcu sollicitudin eget. Praesent rhoncus malesuada mauris at fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac massa lacus, et eleifend turpis. Proin fringilla imperdiet eros at venenatis. Fusce eu tempor lorem. Morbi ipsum tortor, condimentum quis pretium posuere, scelerisque sed purus. Maecenas in augue nunc, et ultrices risus. Fusce convallis tempus varius. Pellentesque eget nulla magna, ac ornare nibh. Morbi euismod dolor et nisl molestie in ornare eros gravida. Praesent sit amet lorem hendrerit diam ultrices egestas nec quis felis. Suspendisse nec nisl erat, ut ornare risus. Nulla nec pretium sapien.
</p>
<p>
Proin urna tellus, commodo in rhoncus non, elementum aliquam nisl. In consequat pretium dolor vel sollicitudin. Aliquam quis mauris eu elit hendrerit ultrices a et justo. Phasellus nec sodales felis. Pellentesque venenatis mauris in magna fringilla vitae fringilla erat tempor. Proin posuere augue eu odio volutpat ultrices. Donec pulvinar interdum eros in auctor. Sed molestie, lacus id posuere elementum, erat odio eleifend ligula, vel euismod nibh libero sit amet dolor. Phasellus ac augue urna. Pellentesque feugiat suscipit semper. Pellentesque luctus tempus tincidunt. Ut scelerisque, eros et porta euismod, neque elit ornare quam, quis posuere sem nulla et velit. Nam purus neque, accumsan nec lacinia ut, varius vel arcu. Nullam at orci sem, et aliquet augue. Nam imperdiet suscipit feugiat. Suspendisse dictum mi eget magna commodo at tristique odio dictum.
</p>
<p>
Ut a magna nec nulla ultrices faucibus. Praesent et est est. Aliquam vulputate lobortis tincidunt. Phasellus rhoncus imperdiet aliquet. Nullam id mi neque, sit amet tristique urna. Integer adipiscing, ipsum vel vestibulum vulputate, nulla ipsum blandit orci, et elementum quam lorem vitae mauris. Quisque consectetur ornare euismod. Nam vel iaculis risus. Proin lobortis dignissim lacus, sed feugiat lacus ultrices quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nullam bibendum posuere adipiscing. Suspendisse potenti. Praesent nisi sem, scelerisque et semper vitae, pulvinar eget nunc. Mauris ultrices ultricies sem, pulvinar convallis augue aliquet eu. Curabitur sed purus eu turpis congue egestas. Sed tempus orci quis elit hendrerit pretium. Nam dictum nibh non orci vestibulum elementum. Phasellus sit amet velit volutpat erat elementum venenatis. Quisque facilisis egestas libero, a gravida nibh rhoncus quis. Quisque risus diam, viverra eu lacinia eu, ultrices non eros. Curabitur placerat imperdiet neque, ut cursus purus posuere eu. Proin sed ipsum leo, vitae rutrum diam. Suspendisse placerat risus nec nisl adipiscing vitae sagittis ipsum hendrerit. Phasellus sollicitudin orci mauris, sit amet sollicitudin lectus. Vivamus et bibendum justo.
</p>
<p>
Duis sed metus ac mi fermentum congue in vel nisl. Integer nunc magna, pulvinar a venenatis a, accumsan varius libero. Integer facilisis urna non enim viverra a porttitor ante lobortis. Pellentesque pharetra gravida porttitor. Morbi iaculis nibh sed urna malesuada ac facilisis mi vestibulum. Praesent euismod aliquam laoreet. Praesent at dolor eget augue convallis viverra vel ut ante. Praesent dictum est et nisi dictum ut vestibulum erat ullamcorper. Donec aliquam, quam in euismod pulvinar, augue mauris gravida lorem, a porta nunc felis at felis. Nam eget libero urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean iaculis massa sed purus tempor eu laoreet odio venenatis. Integer ultrices felis id ante pharetra bibendum. Sed at lorem vitae nunc vestibulum egestas. Fusce vel malesuada neque.
</p>
<p>
Sed non pretium sem. Aliquam id elit malesuada mi commodo dignissim ac sit amet diam. Integer fringilla arcu id est tincidunt non vestibulum eros commodo. Sed dictum sapien in nisi dapibus id pretium ipsum rutrum. Nulla justo diam, auctor sit amet venenatis sed, volutpat non ante. Aenean eu tristique augue. Suspendisse nisl nibh, eleifend et adipiscing in, volutpat sed enim. Nunc eros urna, gravida vitae interdum eget, volutpat et ipsum. Suspendisse eget turpis varius magna pretium fermentum. Nam neque turpis, tristique ac semper eu, pellentesque sit amet dolor. Integer aliquam aliquam tortor, sit amet dignissim quam laoreet at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet mi augue. Maecenas pretium accumsan sollicitudin.
</p>
<p>
In at neque quam, sed sollicitudin eros. Praesent venenatis, neque quis molestie dapibus, nisl nibh tincidunt elit, sodales fermentum quam purus sed dolor. Nullam bibendum, nisl a scelerisque accumsan, dui nibh dapibus mi, ut pellentesque arcu massa aliquam lectus. Cras fermentum, libero eget pulvinar elementum, nibh orci fermentum justo, a bibendum lectus nisl sit amet felis. Mauris at lorem quis est auctor tristique. Quisque dui libero, congue vel fermentum vel, congue quis libero. Aenean cursus dolor at augue sodales rutrum. Aenean egestas vulputate nulla, at porta tortor venenatis id. Vivamus sit amet lectus vitae lorem pellentesque mollis sed a diam. Donec consectetur mi non sapien sagittis faucibus. Proin at lacus purus, in lobortis lorem. Praesent ac arcu justo, at elementum erat. Quisque vulputate accumsan turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tempor erat vel tellus pellentesque tincidunt. Duis dolor mi, placerat id molestie laoreet, semper ut nibh.
</p>
<p>
Suspendisse potenti. Sed eu risus dolor, vel semper libero. Sed accumsan est eget urna vulputate pretium. Integer varius venenatis quam. Praesent lacus diam, condimentum quis luctus in, convallis vitae est. Suspendisse potenti. Phasellus interdum mauris ut nisi feugiat sodales. Vivamus condimentum, leo sed placerat rhoncus, eros lacus ultricies sem, sit amet tempor libero nisl et lacus. In sed odio arcu. Proin id diam a lacus tristique posuere. Integer luctus urna et nulla ultrices interdum.
</p>
<p>
Vestibulum a eros quam, et laoreet nisi. Duis convallis tincidunt augue nec pulvinar. Nunc malesuada urna ut sem placerat consequat. Nulla sollicitudin venenatis quam sollicitudin gravida. Curabitur elementum quam sit amet dolor euismod non dapibus elit tincidunt. In turpis augue, luctus et iaculis a, molestie at risus. Praesent sit amet ante ac ipsum fringilla dignissim. Aliquam elit orci, feugiat faucibus laoreet eu, sodales interdum velit. Aliquam dolor mi, pharetra vel suscipit id, tempor eu arcu. Aliquam sem turpis, rutrum quis porta sed, faucibus quis eros. Proin quis varius velit.
</p>
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.