zoukankan      html  css  js  c++  java
  • 监听页面向上向下滚动事件

    需求

    希望在页面向下滚动时则隐藏"返回顶部"按钮,否则显示。
    以下将滚动代码整理出来scrollEvent()方法
    (适用于滚轮滚动、键盘上下滚动、滚动条滚动)

    代码

    /* 监听页面向上向下滚动事件 */
    function scrollEvent() {
      window.onscroll = function (e) {
        scrollFunc();
        if (scrollDirection == 'down') {
          //页面向下滚动要做的事情
        } else if (scrollDirection == 'up') {
          //页面向上滚动要做的事情
        }
      }
    }
    
    var scrollAction = {
        x: 'undefined',
        y: 'undefined'
      },
      scrollDirection;
    
    function scrollFunc() {
      if (typeof scrollAction.x == 'undefined') {
        scrollAction.x = window.pageXOffset;
        scrollAction.y = window.pageYOffset;
      }
      var diffX = scrollAction.x - window.pageXOffset;
      var diffY = scrollAction.y - window.pageYOffset;
      if (diffX < 0) {
        // Scroll right
        scrollDirection = 'right';
      } else if (diffX > 0) {
        // Scroll left
        scrollDirection = 'left';
      } else if (diffY < 0) {
        // Scroll down
        scrollDirection = 'down';
      } else if (diffY > 0) {
        // Scroll up
        scrollDirection = 'up';
      } else {
        // First scroll event
      }
      scrollAction.x = window.pageXOffset;
      scrollAction.y = window.pageYOffset;
    }
    
  • 相关阅读:
    bzoj5328: [Sdoi2018]物理实验
    HDU
    bzoj4820: [Sdoi2017]硬币游戏
    bzoj4600: [Sdoi2016]硬币游戏
    阿里云配置防火墙规则
    博客园 添加 Live 2D 模型
    R语言做逻辑回归
    R语言错误的提示(中英文翻译)
    用随机森林分类
    python 切换虚拟环境
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/13716904.html
Copyright © 2011-2022 走看看