判断网页滚动方向

这种方式,当一直向下滚动的时候,只会显示一次‘down’,只有两次方向不一样时才会重新显示。

var scrollAction,originalDir;

window.onscroll = function (e) {
  var direction = scrollFunc();
  if(direction&&originalDir!=direction){
    if (direction == 'down') {
      console.log('down');
    }
    else {
      console.log('up');
    }
    originalDir=direction;
  }
}

//判断页面滚动方向
function scrollFunc() {
  var scrollDirection;
  if (!scrollAction) {
    scrollAction = window.pageYOffset;
  }
  var diff = scrollAction - window.pageYOffset;
  if (diff < 0) {
    // Scroll down
    scrollDirection = 'down';
  } else if (diff > 0) {
    // Scroll up
    scrollDirection = 'up';
  } else {
    // First scroll event
  }
  scrollAction = window.pageYOffset;
  return scrollDirection;
}
您可以使用JavaScript来实现网页上下滚动的效果。下面是一个简单的实现示例: 1. HTML结构: ``` <div id="container"> <div id="content1">Content 1</div> <div id="content2">Content 2</div> <div id="content3">Content 3</div> </div> ``` 2. CSS样式: ``` #container { height: 100vh; /* 设置容器高度为视口高度 */ overflow: hidden; /* 隐藏溢出部分的内容 */ display: flex; /* 设置子元素为 flex 布局 */ flex-direction: column; /* 设置子元素垂直排列 */ } #container > div { height: 100vh; /* 设置子元素高度为视口高度 */ display: flex; justify-content: center; align-items: center; font-size: 5rem; font-weight: bold; } #content1 { background-color: #f00; } #content2 { background-color: #0f0; } #content3 { background-color: #00f; } ``` 3. JavaScript代码: ``` // 获取容器元素和子元素 const container = document.getElementById('container'); const contents = container.children; // 设置当前显示的子元素索引 let currentContentIndex = 0; // 监听鼠标滚动事件 container.addEventListener('wheel', (event) => { // 判断滚动方向(向上滚动为负数,向下滚动为正数) const direction = Math.sign(event.deltaY); // 根据滚动方向计算下一个子元素的索引 const nextContentIndex = currentContentIndex - direction; // 如果下一个子元素存在,则切换到该子元素 if (contents[nextContentIndex]) { currentContentIndex = nextContentIndex; container.scrollTo({ top: contents[currentContentIndex].offsetTop, behavior: 'smooth' }); } // 阻止默认滚动行为 event.preventDefault(); }); ``` 以上示例中,我们使用了 `flex` 布局和 `100vh` 视口单位来实现子元素垂直排列并占满整个视口的效果。然后,我们监听了容器的 `wheel` 滚动事件,并根据滚动方向计算下一个子元素的索引,然后使用 `scrollTo()` 方法切换到该子元素。最后,我们阻止了默认的滚动行为,以避免页面滚动时出现抖动。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值