jquery检测滚动事件向上/向下和向下的方向,并将其存储以在滚动函数之外使用

pbpqsu0x  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(171)

我有下面的函数,我试图使检测如果滚动事件是向上或向下。它的工作正常,但我也想检查用户是否已经到达底部执行一些行动。或者更好的是,我想取代向下事件与底部检查。简单地说,它应该总是检测向上滚动,但是应该只在滚动条到达底部时检测底部,而不是向下滚动时。最后,我想把它存储在变量scroll中,当我在scroll事件之外执行console.log(scroll)时,它只在页面加载期间更新一次,并且不会在scroll时返回更新后的值。但我需要在scroll事件之外使用它,因此必须获得scroll变量的更新值。

var lastScrollTop = 0,
  delta = 5,
  scroll = '';

$('.chat-box').scroll(function(event) {
  var st = $(this).scrollTop();

  if (Math.abs(lastScrollTop - st) <= delta) {
    return;
  }

  if (st > lastScrollTop) {
    scroll = 'down';
  } else {
    scroll = 'up';
  }

  lastScrollTop = st;

  console.log(scroll); // RETURNS UPDATED VALUE PROPERLY AS SCROLL EVENT TRIGGERS IT
});

console.log(scroll); // DOESN'T RETURN UPDATED VALUE

期望值:如何获得以下信息?
1.检测滚动条到达底部的时间,并使用值bottom更新scroll变量。
1.将更新后的值存储在scroll变量中,以便在$('.chat-box').scroll(function (event)事件的作用域之外使用该变量。

5lhxktic

5lhxktic1#

最后一行的控制台语句在脚本加载后执行,此时var scroll为空字符串,之后最后一行不再执行。
如果您在再次卷动之后呼叫主控台陈述式,可能是在函数或其他事件行程常式中,则会记录更新的值。例如,您可以在click事件行程常式中呼叫该陈述式:

$('.chat-box').on('click', function() {
  console.log('click: ' + scroll); // DOES NOW RETURN THE UPDATED VALUE
});

工作示例:

(我将scroll事件的选定元素更改为$(window)以进行演示)
第一个

相关问题