chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Gross IE hack for getting the scroll position of the window

Browse Source
This commit is contained in:
Chuck Dries 2017-02-14 04:09:15 -07:00
parent e35bdd813b
commit d3769b202d
5 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -20,15 +20,15 @@
var mast;
function bgColor() {
console.log("innerHeight = " + window.innerHeight + ", window.scrollY = " + window.scrollY);
var p = ((window.innerHeight - window.scrollY) / window.innerHeight); //calulate ratio of scroll
console.log(p);
var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
x.innerHTML = " " + String(parseInt(p * 100)); //display it
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
console.log(rgb);
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
document.body.style.backgroundColor = colorString;
console.log(colorString);
}
function getScrollY(){
//internet explorer does not have a window.scrollY property, so we need to make our own
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
}
</script>
<style>

6
scroll.js
View File

@ -10,7 +10,7 @@ var startTime = null;
function smoothScroll(targetId){
target = document.getElementById(targetId);//grab the element
targetHeight = target.offsetTop; //get its height
currentHeight = window.scrollY; //grab the current scroll position
currentHeight = getScrollY(); //grab the current scroll position
startTime = null; //we have to reset the start time every time the animation runs
if(currentHeight != targetHeight){
window.requestAnimationFrame(animateScroll);//schedule the animation
@ -19,11 +19,11 @@ function smoothScroll(targetId){
function animateScroll(timeStamp){
if (startTime == null) startTime = timeStamp; //record the time the animation started if we're just starting
var deltaStep = (timeStamp - startTime) * speed; //timeStamp - startTime gives us miliseconds since the animation started, we scale this down because its usually in the hundreds.
currentHeight = window.scrollY; //record the current scroll position of the window
currentHeight = getScrollY(); //record the current scroll position of the window
var offsetScroll = targetHeight - currentHeight; //calculate how far we still need to go
var deltaScroll = deltaStep * offsetScroll; //decide how far to scroll this tick
window.scroll(0, currentHeight + deltaScroll); //scroll!
currentHeight = window.scrollY;//re-record the current height after scrolling for comparison
currentHeight = getScrollY();//re-record the current height after scrolling for comparison
if(currentHeight != targetHeight){ //schedule another tick if we need to
window.requestAnimationFrame(animateScroll);
}

2
style.css
View File

@ -13,7 +13,7 @@ body {
transition: none; }
#mast {
background: black;
background: none;
line-height: 1.2;
color: white; }
#mast a {

2
style.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM",
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM",
"sources": ["style.scss"],
"names": [],
"file": "style.css"

2
style.scss
View File

@ -21,7 +21,7 @@ body {
}
#mast {
background: black;
background: none;
line-height: 1.2;
color: white;
a {