Reveal image as user scrolls down - javascript

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>

Related

Top Tab Navigator height problem when wrapped in ScrollView

I have this basic Tab component wrapped in a ScrollView:
const MyTab = () => {
return (
<ScrollView>
<View style={{flex:1}}>
<Tab.Navigator
initialRouteName="GeneralInformations"
>
<Tab.Screen name="GeneralInformations" component={LoremIpsum} />
<Tab.Screen name="TransactionsTab" component={LoremIpsum} />
</Tab.Navigator>
</View>
</ScrollView>
)
}
Each screen have this basic View component:
const LoremIpsum = () => (
<View>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum augue a mi semper, et aliquet arcu tempor. Suspendisse ante nunc, iaculis quis purus nec, consectetur molestie nibh. Etiam non ex facilisis, placerat erat vitae, blandit eros. Pellentesque ac posuere urna. Vivamus tempor diam a condimentum gravida. Ut et placerat justo. Duis a rutrum odio. Nulla sed dolor rhoncus, vestibulum velit eget, cursus neque. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque interdum magna a fermentum efficitur. Nunc non tellus vitae leo luctus dignissim.
Integer laoreet suscipit sem id ullamcorper. Aliquam euismod sodales nisl sit amet imperdiet. Praesent fermentum magna tellus, nec tristique quam fringilla sit amet. Sed ut risus non urna congue maximus. Sed eros leo, dictum eget metus vitae, laoreet porttitor leo. Nullam sed lacinia neque. Nulla facilisi. Vestibulum vel aliquam elit, et faucibus lorem. Sed sit amet tincidunt eros.
Proin imperdiet orci vel accumsan pharetra. Quisque nec lorem nec purus cursus feugiat at ac lorem. Sed luctus porttitor ante, a mollis dui facilisis non. Mauris venenatis ultricies nisi sed ornare. In a volutpat ex. Quisque at arcu a ante vestibulum pellentesque. Morbi eu semper sem, eu imperdiet odio. Etiam non eleifend ligula. Phasellus gravida tellus a ligula efficitur feugiat. Nulla ligula mauris, consequat ac mollis in, tincidunt aliquet sapien. Suspendisse ultricies quam ac velit ultricies mattis.
Sed dictum semper pellentesque. Donec ultricies diam a justo consectetur tincidunt. Fusce cursus dignissim nisi. Aliquam ut commodo nulla, non fringilla risus. Donec egestas massa et ligula accumsan, at condimentum ex pellentesque. In non interdum sapien, sed efficitur libero. Nulla eu neque eleifend, sodales risus ac, dictum sapien. Sed molestie quam sit amet lacinia vehicula. Suspendisse pellentesque maximus libero quis laoreet. Sed vel nisl non magna feugiat lobortis. Proin ac dui sit amet dolor pulvinar placerat. Nam quis sem eu mi vulputate ornare. In rhoncus nunc vitae nibh fringilla maximus.
Nullam ornare volutpat vulputate. Praesent quis purus sem. Duis facilisis, ipsum sit amet efficitur finibus, turpis velit molestie sapien, eget commodo sapien nisi et massa. In enim mauris, sollicitudin eu est non, elementum mollis turpis. Maecenas mauris magna, sodales sed odio sit amet, consequat feugiat sapien. Cras blandit non massa non dictum. Vestibulum finibus eu felis sed sollicitudin. Aliquam dignissim semper felis, vel lacinia augue egestas nec. Curabitur gravida, lacus non mattis mattis, lectus leo lacinia ante, eu laoreet erat sem ut ex. Fusce ante orci, aliquet nec mi ac, tincidunt semper est. Quisque lobortis, ante viverra lacinia gravida, ipsum nisl ornare enim, vitae sollicitudin libero tellus nec ligula. Cras ultrices metus eget ex faucibus, sed sodales est pretium. Cras ac purus enim. Sed dui dolor, porttitor non odio vel, efficitur sagittis diam. Mauris malesuada libero vitae purus rhoncus ornare. Quisque turpis mi, ullamcorper eget felis ac, molestie aliquam lectus.
Maecenas nulla lacus, ornare vitae mauris ut, placerat porta augue. Mauris eget ullamcorper tellus. Mauris accumsan lacus eu diam tincidunt tincidunt. Vestibulum accumsan ultricies purus, nec pretium eros ultrices ut. Morbi facilisis at est vel hendrerit. Nunc justo orci, tincidunt in condimentum eu, consectetur quis tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet sem varius, convallis ante non, semper mauris. Maecenas aliquet aliquet justo, a aliquam nunc. Suspendisse dignissim, tortor nec imperdiet condimentum, mauris purus malesuada enim, at mattis arcu felis at dui. Maecenas vitae lacus tincidunt, commodo massa ut, feugiat diam. Nam elementum quam vitae enim rhoncus tempor. Phasellus sit amet placerat quam. Cras dolor erat, sollicitudin a metus vel, aliquet commodo neque.
Cras vel pellentesque ipsum. Fusce et dictum augue. Quisque vulputate in purus quis molestie. Proin id nunc aliquet, blandit tortor ut, tristique lectus. Aliquam malesuada nulla a leo varius ullamcorper. Nam aliquet semper lorem et vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sagittis, mauris id lobortis mattis, ligula ante tincidunt nisi, sodales imperdiet leo mi et nisl. Curabitur consectetur mollis tortor, ut tincidunt augue aliquet sed.
</Text>
</View>
)
But the default behavior is that the components don't show up:
However, if I manually set the height of the parent View (that wraps my Tab.Navigator component) the components starts to show up, but not the entire component, just as much as the height value. Ex, if I set height:500:
Set height:'100%' also doesn't work either because it only shows up to the height of the screen, but the component is bigger than it.
I need to show the entire LoremIpsum component, and I need the ScrollView to work. The only way I got it is by manually setting the height (as I said before) but I want to use components with different heights.
I really need to use this ScrollView parent... anyone know what is this?

Changing css property with onscroll

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>

Javascript scrollTop not working

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>

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.

Categories

Resources