Related
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>
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>
I am trying to store long strings in Realm (possibly exceeding their 16MB limit). To reduce their size I am attempting to use the lz-string tool to achieve this. However, when I attempt to store the string into Realm I am getting the following error:
[Error: basic_string::resize]
Here is the text before compression:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a ex quis lacus hendrerit sodales vitae nec leo. Vivamus imperdiet nisi eu quam condimentum, nec porttitor magna blandit. Mauris arcu leo, euismod sed tortor id, elementum congue nibh. Aliquam erat volutpat. Donec tempor magna eget ultricies vestibulum. Morbi ac turpis aliquet nibh rutrum auctor vitae id quam. Maecenas vel nunc erat. Vestibulum vulputate mauris at neque faucibus iaculis. Vivamus luctus, nunc quis maximus pellentesque, nisl sapien consequat sapien, id vestibulum nulla quam sit amet metus. Aliquam vel varius erat.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam fermentum sit amet lectus quis pharetra. Duis tempor pretium mi quis dapibus. Donec lobortis justo ex. Maecenas dapibus odio non urna maximus pretium. Vivamus et convallis odio.
Sed sed molestie lectus. Nam et diam et lectus sagittis sagittis ornare et sem. Quisque consequat nunc eu libero hendrerit pharetra. Aliquam ac tempus massa. Donec sed dolor tristique, consectetur nunc nec, fringilla orci. Proin lobortis ipsum vel lorem aliquet posuere. Praesent dapibus metus iaculis, aliquet tortor eget, blandit sem. Vivamus eleifend consectetur ullamcorper. Suspendisse elementum diam libero, eu vestibulum arcu sagittis nec. Etiam at pellentesque augue, vel iaculis dolor. Cras quis dictum urna. Ut ultricies aliquet arcu a porttitor. In vel purus eget ex mattis porttitor ut congue massa. Duis sagittis nisl elit, id mattis magna pulvinar a.
Integer ac rhoncus purus. Ut vitae orci eros. Curabitur ullamcorper massa id risus efficitur, et laoreet ex consequat. Nunc nec suscipit est. Phasellus ac est ex. Etiam odio erat, ultrices in fermentum in, pretium non justo. Phasellus posuere nisl eu odio placerat, quis luctus arcu auctor. Nunc eu ligula sem. Nam non pharetra nisl. Suspendisse congue augue hendrerit, sagittis ex quis, mattis est. Aenean sed nibh vel sem tincidunt gravida vel vitae mauris. Morbi a dui sed lorem tristique accumsan ac at neque. Donec nec enim nulla.
Nullam vitae aliquam leo, eu auctor diam. Suspendisse a venenatis orci. Proin ut tellus eleifend, finibus erat non, egestas tortor. Phasellus sed augue pulvinar, porta arcu sed, luctus felis. Suspendisse at gravida felis, eu tempus lectus. Phasellus imperdiet enim eget vulputate facilisis. Nunc magna tellus, condimentum non elementum eu, faucibus et mi. Morbi nec nisl et purus sollicitudin mollis. Nam eget arcu vitae nisl tincidunt tristique id sed est. Nulla lobortis diam hendrerit nunc pretium varius eu a lectus.
And here is the text after compression:
᐀⌠搞삜ᓀ똠▀ᰌ␄쨁떄疐ׄČ᎔聨䀘쨀臒泆䩳奴ඓ『戎㸲è䀀冁丛曤⮈Ǣ#ꘁ⇰偩鴈\u0016熘ಱ⠸⯢刀ᮙ䔡鮷휊ಀ櫈⹔온ࢨ瀰簴鸂죢飚顔谬糔⫘ఠꢰ꒤摄ࠔ⋌樀䘆雒 눔�ᐰ䘾僴為瀸₤Մ져嵎ᦤ�ꊘ炱閦㈀芒㨩鄔Ҙ꒨㬲"Ⳟ鳡╥ᗢ∱飸ꐶ䋎⹊䖕还㋵낕ホ誁桬ᛤ昲ᥢƀ᳡䠦蜈蛥⁹왉⨯텀산偌➓쭭䠁ྴ㯤腲㵐ܝꋔ곑ロ㱰ᴢ쀆撎꒙邆䞀耤ᄈ駰頎㆛≍죨甲Ċႋ⨥•➠⢠謜춉뜠챺ؽ褚딦줂䕓凈ợኔ⚹嫈傹⩀ؐ㎠�上顨挣에倡ᐝΥ訊憬ᢈ챌-䳅似⣴ˊᒗڎꛌ⪼澝̠ω뗢섛⡂ꈲ錌咮发䜘ೆ셤㣨沾㜗㶇趐䙉䦕囙\u0001䒊⥮摚欳癐㴾楉腝㴲둨轘梇죱僰⊬섏ှ 訉簇駃鏨倥䁑ᖱ舰棘묇袘ⁿ∃�ᐉ‷ୱ⨪骫句ࠨ갓㤄嬄超㠂얀2ꃀㄌ紓蝫₋ᎇ磈\u001c雎䇰順袆䄔뉙䂦ՏÑ̅ሀ㴠髉⠤馥䤒▍拘ꠓ븠㫌肺鐮䥰㉻븠檜䛁౸℃쌼ȑ䎨髬✁묖ꒇ태越⌠亖ᗘ죲ᐌ⅁ぬꁘⴡ⅁⸈쓹ᘉᇀ奂蒠⻀憩蕺ʐꤠ꺔╞䂌뎑܃�ࠍ偐딹ꢂ凢뢄枥蔔灜༈ࠓ̀ᘲ㬜恄딤械䢈˫㉉䠤腤삝ᦛ毚銢⛒⑲䪒惤㈱⋤㪩ꬮ莓䈠㾨⣮鎁좡芏箾簴ꒂᄔಀʫ邏ᡚ㵥ࣶ偹ń凵㈀ब슸ꕃ✊蹃䚂ʔ蔞藺㍽䄛䒰胳⏧⌠ৎ賫쵤㖣쓬詽㍱ꠌ븆鐔蛄胊�쏜㰐⌂頬ᆍ㭰�ڎ룮⋋Ĉ큺蛜Ԁꭕƴ횥⑦ꁢ㘖狜뛦䍰崹b쁰ేɨ虧ⱦ覦搕ꂹDZ敏鬁ꪄ䂇첅ḧ鈄왛㬽ƌ볎⹖磀ធణ噤泎宓좩쒋렓㕆锋ꁄ띅藰롪bピي瞮㻑⋄젂⚙緤蠌ᡚ梒鏗礃鋹険뛛둘厛ܲ玔☂罙嘤䨯悷䰾㤯⟎䖇ƍ�쩠叺ꈌ㌈䈇爂—ᮀ瀿쓙ꈮ櫉縿쐄쁗䉿Ⴇﳂ뼗兀ࣀ 乌脻⋰岏쩁䠡恕⎠お�ꬪἼ鴭┶�쬤玫≁鹄೩ྡྷ썐쏶唤⇪蹗☇ϳꝑ쬵섀뻊ᆁ˩ࡘᝇ롶鼐ꌀ厾⍮ꄐ⪟Ꮻⷥꭆ갅ൂ둶蠕ਢ䂊ဃ둸䇰၇�肊ข퐙氣傄⑤麋仭앐ᙨ蒜ꄒКㄎ鏠ن褸ʏ貝姇콸긹渧ڑ뎤Ꭴ耷釔급ऩᘹ逜ঀ⫄ứ꒩ꆈₒࡀ찾ํ碧卞魘쒊蠼㝲⑅ᒓ豠ᰱ㶄偘⠈愘韫䉗ꄇ쪒쳩頃䲼凼㐜蠆廊㧘璖\u0000
According to the demo on the site above, the text is 5430 bytes before compression and 1480 bytes afterwards, clearly well under 16MB in both cases.
Not sure if the website is implying that only the default JS local storage implementation is supported from the way it refers to local storage. Other than that, has anyone tried using this compresison tool with Realm and gotten it to work? Or seen this error?
Having read the API, I realised that the compress(string) method returns an "invalid" UTF-16 string. Using compressToUTF16(string)/compressToBase64(string) and their respective decompress methods do not give the error (although the former is not working for me but that's a separate issue).
I am trying to use javascript to scroll a div down like this...
$(document).ready(function() {
var list = document.getElementsByClassName('list');
list.scrollTop = 110;
});
.list{height:100px;background:wheat;color:white;overflow:hidden;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.
Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.
Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.
Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.
In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit.
</div>
It is not moving though, what am I doing wrong?
The function getElementsByClassName returns a list of elements and not specific element, and you can't use scrollTop on a list of elements. This method belong to the DOM Element object.
What you can do is take the first element you found and run that on this element:
var list = document.getElementsByClassName('list');
list[0].scrollTop = 110;
Of you can go over all the elements you found and set the scrollTop of each of them:
Array.prototype.forEach.call(list, function(el) {
el.scrollTop = 110;
});
Here is the fix to your snippet with the first option:
$(document).ready(function() {
var list = document.getElementsByClassName('list');
list[0].scrollTop = 110;
});
.list{height:100px;background:wheat;color:white;overflow:hidden;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.
Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.
Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.
Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.
In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit.
</div>
As Dekel pointed out, getElementsByClassName returns an array, not an element. However, since you're already using jQuery I'd recommend that you instead just use that instead to set the scroll:
$(document).ready(function() {
$('.list').scrollTop(110); // use jQuery instead of vanilla JS
});
.list{height:100px;background:wheat;color:white;overflow:hidden;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.
Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.
Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.
Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.
In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit.
</div>
You can also use div.scrollTop=div.scrollHeight it will work for you.
var divEl = document.querySelector('div.list'),
scrollHeight = divEl.scrollHeight;
divEl.scrollTop=scrollHeight;
.list{
height:100px;
background:#ccc;
color:#5c5c5c;
overflow:hidden;
overflow-y: scroll;
}
<div class="list">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.
Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.
Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.
Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.
In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit.
</div>
I was checking this website: http://www.flagofplanetearth.com/
You can see, the images reveal more as you scroll down.
I have seen such an effect on only a few other websites and was wondering how it is done. I don't even know what it's called so couldn't really search for it.
Thanks.
It's called a parralax effect.
Here's a great documentation on how it works
Cheers!
That's a parallax effect.
Simple method: (fixed image)
.parallax {
background-attachment: fixed;
}
Advanced method: (what you saw)
1) Use same CSS
2) Use the following JS:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
Check out this:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
#parallax {
background-image: url('http://lorempixel.com/400/400/abstract/');
background-attachment: fixed;
min-height: 400px;
}
<div id="parallax"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et arcu est. Praesent nec lacinia mi. Nulla augue erat, egestas at tortor et, gravida aliquet erat. Proin in rutrum velit. Vestibulum volutpat, leo et rutrum gravida, mauris urna malesuada justo, ut condimentum diam neque non nisi. Aenean malesuada, nisi non dapibus imperdiet, leo libero iaculis dolor, in convallis augue ante nec urna. Suspendisse vulputate vel ex dictum aliquet. Aliquam dapibus scelerisque dapibus. In ut lorem a leo feugiat iaculis cursus sit amet lectus. Integer id ante sed mi egestas tincidunt. Duis maximus augue eu ipsum ultrices dictum.
<br><br>
Proin eget enim auctor, vehicula dui eget, vulputate leo. Donec pulvinar diam interdum, vulputate erat nec, blandit risus. Fusce tristique velit libero, porttitor egestas libero feugiat ullamcorper. Maecenas bibendum tristique efficitur. Cras fringilla ac eros nec iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien molestie, molestie magna nec, consectetur velit. Etiam vestibulum pretium quam ac imperdiet. Nullam quis nisl eget felis vestibulum bibendum nec id velit. In vel commodo nisi, nec euismod quam. Duis ultrices pretium imperdiet.
<br><br>
Pellentesque quis velit lectus. Morbi id tincidunt libero. Fusce id convallis nulla, sed porttitor eros. Morbi eget libero vel mi efficitur placerat. Fusce sed commodo ex. Nulla gravida enim et elementum fringilla. Vestibulum arcu dui, suscipit ut mauris ut, iaculis aliquam tellus. Praesent in volutpat justo. Morbi volutpat metus at magna rhoncus, in molestie odio vestibulum. In vel euismod nibh. Phasellus ac dictum velit. Donec tincidunt lacus a diam tempor luctus ac ut eros. Etiam condimentum nunc in ex malesuada vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br><br>
Fusce tortor magna, fringilla sit amet dignissim in, euismod quis augue. Phasellus egestas erat eu pellentesque blandit. Vivamus vitae pellentesque arcu. Quisque commodo, leo sed auctor tincidunt, erat sem blandit nulla, quis vestibulum magna lorem sed tellus. Suspendisse ultricies hendrerit eleifend. Cras viverra, diam vitae vulputate mattis, quam augue aliquet odio, sit amet dapibus felis odio id lectus. Proin sit amet ornare mauris, quis sodales diam. In hac habitasse platea dictumst. Quisque eget hendrerit tellus. Suspendisse vulputate non dui vel auctor.
<br><br>
Curabitur volutpat eros tellus, ut fringilla nibh cursus eget. Aenean sed urna et nulla aliquet tempor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod fermentum risus, sit amet semper enim. Morbi pulvinar sapien a commodo tempor. Duis ut tellus malesuada, consequat neque a, accumsan nibh. Pellentesque convallis neque sed odio tempor, quis vestibulum eros viverra. Nunc tincidunt ligula ut dolor mattis, eget mollis velit scelerisque. Fusce sed enim sollicitudin, aliquam mi non, mattis diam. Nullam faucibus massa id nisl sagittis, id pharetra enim pharetra. Ut a varius libero, ac malesuada arcu.</div>