Question

我有一个函数可以在框滚动时隐藏一些标题，并在向上滚动时显示标题。它工作正常，但如果我不是通过鼠标滚轮或触摸板滚动页面，并在滚动条上使用鼠标按钮 - 事件开始重复，我的意思是如果我将通过拖动慢慢向下滚动，标题隐藏和显示隐藏，显示等。

我想知道在按下鼠标按钮后执行一次后是否有办法停止事件处理程序？

感谢。

我的代码：

const throttleHidings = _.throttle(headerHidings, 400);

$(".data-table").scroll(throttleHidings);

function headerHidings() {
  const element = $(".hiding-part"),
                  t = "transparent";
  let scrollPosition = $(".data-table").scrollTop();


  if (scrollPosition - contentScrollPosition > 0) {
    scrollingDown = true;
    lastPos.bottom = scrollPosition;
    contentScrollPosition = scrollPosition;
  }

  if (scrollPosition - contentScrollPosition < 0) {
    scrollingDown = false;
    contentScrollPosition = scrollPosition;
    lastPos.top = scrollPosition; 
  }

  if (scrollingDown) {
    hiding(scrollPosition - lastPos.top);
  } else {
    showing(lastPos.bottom - scrollPosition);
  }  

  function hiding(pos) {
    if (pos > 100) {
      $table.height("calc(100% - 133px)");
      element.slideUp(150);
    }
  }

  function showing(pos) {
    if (pos > 50) {
      element.slideDown(150, () => $table.height("calc(100% - 340px)"));
    }
  }
}

Answer 1

您可以推迟执行您的功能，例如使用setTimeout来“限制”scroll事件的处理。每次scroll发生时，等待150毫秒。如果它再次发生，clearTimeout并再次设置它。

更新：这里的代码版本似乎正在运行（虽然我删除了限制，所以它可能应该稍后添加）。它并没有真正显示或隐藏任何元素 - 只是输出信息，所以你可以看到它将在完整版本中做什么。

$(".data-table").scroll(headerHidings);

var contentScrollPosition = $(".data-table").scrollTop();
var lastPos = {
  top: 0,
  bottom: 0
};

var $info = $(".info");

function headerHidings() {
  const element = $(".hiding-part"),
    t = "transparent";
  let scrollPosition = $(".data-table").scrollTop();


  if (scrollPosition - contentScrollPosition > 0) {
    scrollingDown = true;
    lastPos.bottom = scrollPosition;
    contentScrollPosition = scrollPosition;
  }

  if (scrollPosition - contentScrollPosition < 0) {
    scrollingDown = false;
    contentScrollPosition = scrollPosition;
    lastPos.top = scrollPosition;
  }

  if (scrollingDown) {
    hiding(scrollPosition - lastPos.top);
  } else {
    showing(lastPos.bottom - scrollPosition);
  }

  function hiding(pos) {
    if (pos > 100) {
      //$table.height("calc(100% - 133px)");
      //element.slideUp(150);
      $info.text('hiding on: ' + pos);
    }
  }

  function showing(pos) {
    if (pos > 50) {
      //element.slideDown(150, () => $table.height("calc(100% - 340px)"));
      $info.text('showing on: ' + pos);
    }
  }
}

.data-table {
  overflow: auto;
  width: 50%;
  max-height: 150px;
  background: green;
}
.fake-content {
  width: 200px;
  height: 3000px;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
    Nothing happened yet.
</div>

<div class="data-table">
  <div class="fake-content">
  </div>
</div>

如何通过拖动栏来执行滚动时阻止.scroll（）函数执行？

1 个答案: