Javascript没有检测滚动方向

时间：2017-03-13 21:16:41

标签： javascript html css

我无法获取javascript来检测您正在滚动的方向。当我向下滚动它输出“向上”到内部HTML徽标，但它从不输出“向下”。无论你滚动哪种方式，它都会保持输出。代码对我来说似乎很好，我不知道为什么这是一个问题。提前感谢您的任何修复。 

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>

3 个答案:

答案 0 :(得分：1)

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

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

    this.lastScroll = scrollY ;
}

或代替窗口，您可以传递对元素的引用：

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

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

  this.lastScroll = scrollY; 
}

答案 1 :(得分：0)

您的编码中存在两个问题： 您向上滚动的新滚动值小于旧版本。 滚动功能可以重复运行。

以下是需要做的事情：

  1. 具有指示方向的功能
  2. 变量previous = window.scrollY，向上和向下查找
  3. window.addEventListener（＆＃34;滚动＆＃34）;这使计算机计算  滚动方向
  4. 让您的辅助功能说明您的条件：  window.scrollY＆gt; value，value是输入前滚动的上一个值。  在down：up中使用console.log函数  使值= window.scrollY

    5. 您可以将您的条件反转设置为window.scrollY时的条件

    以下是一个示例代码：

    我记得在我的课程中遇到类似的问题：D 

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

    有很多方法可以用if和else语句来解决这个问题 潜在的循环。但是，没有必要包含许多变量 主代码之前的函数。这是我的意见。

答案 2 :(得分：-1)

您的scrolltop变量引用了文档scrolltop，当您在ContentSection内滚动时，它不会改变

将其更改为var st = ContentSection.scrollTop;，以便您查看在ContentSection中滚动的距离。

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>

相关问题
最新问题