Javascript not detecting scroll direction

Question

I cannot the get javascript to detect which direction you are scrolling. when I scroll down it outputs "up" to inner HTML Logo, But it never outputs "down". it just keeps outputting up no matter which way you scroll. The code seems fine to me and I havent a clue why this is a problem. Thank you in advance for any fixes.

var ContentSection = document.getElementById("ContentSection");
var Logo = document.getElementById("Logo");
var NavBar = document.getElementById("NavBar");
var CS_Scroll;
var opac = 1;
var lastScrollTop = 0;

ContentSection.onscroll = function() {

  //opac = ShowScrollPosition(ContentSection, Logo, CS_Scroll, NavBar, opac);

  var st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > lastScrollTop) {
    document.getElementById("Logo").innerHTML = "down";
  } else {
    document.getElementById("Logo").innerHTML = "up";
  }
  lastScrollTop = st;
};

html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}

body {
  background: white;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(white, #ffcc66);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, #ffcc66);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, #ffcc66);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(white, #ffcc66);
  /* Standard syntax */
  height: 100%;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#Logo {
  /*border: 1px solid black;*/
  height: 150px;
  width: calc(100% - 305px);
  float: left;
  margin-left: 303px;
}

#LogoPic {
  margin-left: 50px;
  margin-top: 15px;
}

#NavBar {
  position: fixed;
  /* border: 1px solid black;*/
  height: 47px;
  top: 151px;
  left: 303px;
  width: calc(100% - 305px);
  float: left;
}

#LinkBox {
  /* border: 1px solid black;*/
  margin-left: 55px;
  color: DodgerBlue;
}

a {
  padding-right: 50px;
  font: 400 33px/0.8 'Great Vibes', Helvetica, sans-serif;
  /*font: 400 37px/0.8 'Cookie', Helvetica, sans-serif;*/
  text-shadow: 0.5px 0.5px black;
}

#ContentSection {
  /*border: 1px solid black;*/
  height: calc(100% - 229px);
  margin-top: 47px;
  margin-left: 303px;
  width: calc(100% - 305px);
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
}

 ::-webkit-scrollbar {
  width: 8px;
}

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

 ::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 5px;
}

#LeftBar {
  position: fixed;
  /*border: 1px solid black;*/
  height: calc(100% - 2px);
  width: 302px;
}

#SidePanel {
  position: fixed;
  height: 250px;
  width: 285px;
  padding: 0;
  margin: 0;
  top: 200px;
  background-color: black;
  color: white;
  opacity: 0.35;
  text-align: center;
  border-radius: 5px;
  border: 2px solid darkgray;
}

#SidePanelHome {
  border-top: 1px solid white;
  margin-top: 40px;
  width: 235px;
  margin-left: 23px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#SidePanelAboutUs {
  border-top: 1px solid white;
  margin-top: 0px;
  width: 235px;
  margin-left: 23px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#SidePanelProducts {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  margin-top: 0px;
  width: 235px;
  margin-left: 23px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#footer {
  /* border: 1px solid black;*/
  position: fixed;
  bottom: 0;
  height: 27px;
  width: calc(100% - 305px);
  left: 303px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<div id="Logo"><img id="LogoPic" src="images/image002.gif" /></div>
<div id="NavBar">
  <div id="LinkBox">
    <a id="HomeLink">Home</a><a id="AboutUsLink">About Us</a><a id="ProductsLink">Products</a>
  </div>
</div>
<div id="ContentSection">
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>

</div>
<div id="LeftBar">
  <div id="SidePanel">
    <div id="SidePanelHome"><a id="SideHLink">Home</a></div>
    <div id="SidePanelAboutUs"><a id="SideHLink">About Us</a></div>
    <div id="SidePanelProducts"><a id="SideHLink">Products</a></div>
  </div>
  <div id="footer"></div>

your variable `st` is actually a boolean value. You are comparing it as if it was a number, so it always returns false. — pablito.aven, Mar 13 '17 at 21:18
@pablito.aven i believe that's null coalescing the YOffset, are you sure ContentSection has focus after you edit Logo? — Patrick Barr, Mar 13 '17 at 21:20
You're checking the scroll position of the document, which is always 0. You need to check the scroll position of the element that's doing the scrolling. — JJJ, Mar 13 '17 at 21:21

Brian · Accepted Answer · 2017-03-13T21:37:47.673

window.onscroll = function(e) { 
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;

    scrollY <= this.lastScroll 
    ? console.log('up') 
    : console.log('down'); 

    this.lastScroll = scrollY ;
}

or instead of window, you can pass a reference to the element:

ContentSection.onscroll = function() {
  var scrollY = ContentSection.scrollTop;

  scrollY <= this.lastScroll 
  ? console.log('up') 
  : console.log('down'); 

  this.lastScroll = scrollY; 
}

score 0 · Answer 2 · edited Mar 13 '17 at 22:49

There are two problems present in your coding: Your new scroll value of scrolling up is less than the older version. Scroll function can run repetitively.

Here is what needs to be done:

Have a function with direction as indicator
Variable previous= window.scrollY, looks for up and down
window.addEventListener("scroll"); which makes the computer compute scrolling directions
Have your secondary function stating your conditions: window.scrollY>value, value being previous value of scroll before input. Use the console.log functions in down : up Make the value= window.scrollY

You can set your conditions reversed to make the conditions when window.scrollY

Here is an example code:

I remember doing a problem similar to this in my course :D

function logScrollDirection() {
    var previous = window.scrollY;
    window.addEventListener('scroll');
    function(){
        window.scrollY > previous;
        console.log('down') : console.log('up');
        previous = window.scrollY;
    });
}

There are many ways to do this problem with if and else statements, and
potentially loops. But, there is no need to include to many variables for functions prior to the main code. That is my opinion.

score -1 · Answer 3 · answered Mar 13 '17 at 21:21

Your scrolltop variable is referencing the document scrolltop, which doesn't change when you scroll inside of ContentSection

Change that to var st = ContentSection.scrollTop; so that you're looking at how far you've scrolled in ContentSection instead.

var ContentSection = document.getElementById("ContentSection");
var Logo = document.getElementById("Logo");
var NavBar = document.getElementById("NavBar");
var CS_Scroll;
var opac = 1;
var lastScrollTop = 0;

ContentSection.onscroll = function() {

  //opac = ShowScrollPosition(ContentSection, Logo, CS_Scroll, NavBar, opac);

  var st = ContentSection.scrollTop;
  if (st > lastScrollTop) {
    document.getElementById("Logo").innerHTML = "down";
  } else {
    document.getElementById("Logo").innerHTML = "up";
  }
  lastScrollTop = st;
};

html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}

body {
  background: white;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(white, #ffcc66);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, #ffcc66);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, #ffcc66);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(white, #ffcc66);
  /* Standard syntax */
  height: 100%;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#Logo {
  /*border: 1px solid black;*/
  height: 150px;
  width: calc(100% - 305px);
  float: left;
  margin-left: 303px;
}

#LogoPic {
  margin-left: 50px;
  margin-top: 15px;
}

#NavBar {
  position: fixed;
  /* border: 1px solid black;*/
  height: 47px;
  top: 151px;
  left: 303px;
  width: calc(100% - 305px);
  float: left;
}

#LinkBox {
  /* border: 1px solid black;*/
  margin-left: 55px;
  color: DodgerBlue;
}

a {
  padding-right: 50px;
  font: 400 33px/0.8 'Great Vibes', Helvetica, sans-serif;
  /*font: 400 37px/0.8 'Cookie', Helvetica, sans-serif;*/
  text-shadow: 0.5px 0.5px black;
}

#ContentSection {
  /*border: 1px solid black;*/
  height: calc(100% - 229px);
  margin-top: 47px;
  margin-left: 303px;
  width: calc(100% - 305px);
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 5px;
}

#LeftBar {
  position: fixed;
  /*border: 1px solid black;*/
  height: calc(100% - 2px);
  width: 302px;
}

#SidePanel {
  position: fixed;
  height: 250px;
  width: 285px;
  padding: 0;
  margin: 0;
  top: 200px;
  background-color: black;
  color: white;
  opacity: 0.35;
  text-align: center;
  border-radius: 5px;
  border: 2px solid darkgray;
}

#SidePanelHome {
  border-top: 1px solid white;
  margin-top: 40px;
  width: 235px;
  margin-left: 23px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#SidePanelAboutUs {
  border-top: 1px solid white;
  margin-top: 0px;
  width: 235px;
  margin-left: 23px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#SidePanelProducts {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  margin-top: 0px;
  width: 235px;
  margin-left: 23px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#footer {
  /* border: 1px solid black;*/
  position: fixed;
  bottom: 0;
  height: 27px;
  width: calc(100% - 305px);
  left: 303px;
}

<div id="Logo"><img id="LogoPic" src="images/image002.gif" /></div>
<div id="NavBar">
  <div id="LinkBox">
    <a id="HomeLink">Home</a><a id="AboutUsLink">About Us</a><a id="ProductsLink">Products</a>
  </div>
</div>
<div id="ContentSection">
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>
  a</br>

</div>
<div id="LeftBar">
  <div id="SidePanel">
    <div id="SidePanelHome"><a id="SideHLink">Home</a></div>
    <div id="SidePanelAboutUs"><a id="SideHLink">About Us</a></div>
    <div id="SidePanelProducts"><a id="SideHLink">Products</a></div>
  </div>
  <div id="footer"></div>

If my answer is wrong, I would love someone to explain what's incorrect so I can do a better job in the future. — Michael Coker, Mar 13 '17 at 21:26
You know perfectly well why you got downvotes – don't post the answer before you've finished writing it. I've reversed my downvote but others might have moved on and never see the finished answer. — JJJ, Mar 13 '17 at 21:28
@JJJ nope, didn't know that was why. I do that all the time and have never been downvoted for it that I'm aware of. A lot of the time people provide no text with the answer or "see the code below" and I don't see a brigade of downvotes. But I suppose it depends on who's looking at the answers. I certainly don't downvote people for that, so I wouldn't have assumed others would, either. Thanks for responding and letting me know why, I appreciate it. — Michael Coker, Mar 13 '17 at 21:31
In this case adding the "[editing]" disclaimer was the cause, at least for me. Writing a half-assed answer quickly just to get the first answer in and then improving it is considered gaming the system, and blatantly admitting that you're doing it (intentionally or not, doesn't really matter) rubs people the wrong way. — JJJ, Mar 13 '17 at 21:39
@JJJ gotcha, I've only been on the site for a few months and am still learning. Appreciate the feedback. I'll be sure not to post until I have a well articulated response. Should I also be downvoting responses that either have no description or say something meaningless like "See response below" or "Hope this helps"? I don't think I've ever seen those answers downvoted unless they were wrong which is why this caught me off guard. Like the [most recently answered CSS question](http://stackoverflow.com/questions/42774065/cannot-center-div-above-another-bootstrap) - no description, no downvotes. — Michael Coker, Mar 13 '17 at 21:57

Javascript not detecting scroll direction

3 Answers3

Linked