Question

我想在不滚动时显示某些内容，在滚动时隐藏它，并在滚动停止后重新显示它。

为了使自己更清晰：我可以轻松显示我想要的内容，并在滚动事件触发时再次将其隐藏。但是，如果滚动事件已停止，我想更新视图，为此，我需要知道何时发生。

我已经看到一些有关超时的想法，但这意味着在滚动时，我需要定期检查事件是否仍在触发。

在我看来，如果有一种方法可以处理面向事件的事件，那么这不是一个好方法。我能想到的最佳情况szenario是可用于计算属性的变量布尔“滚动”。像这样：

 computed:{
      displayLine: function(){
          if(scrolling){
            //display what I want
          } else{
            //hide it
          }
      }
      // Or something like this: 
      scrolling: function(){
        //if scrolling
        return true;
        //if not scrolling
        return false;
      }
   }

Answer 1

好吧，我知道您并不是真的想使用计时器，但是这似乎是执行此操作的适当方法，因为我们实际上没有确定停止滚动的方法。那么这样的事情呢？

var scroll;
window.addEventListener('scroll', function (event) {
  window.clearTimeout(scroll);
  hidestuff();
  scroll = setTimeout(function () {
    redisplay();
  }, 500);
}, false);

上面的代码在每次触发滚动时都会刷新计时器，如果半秒钟（500毫秒）内没有滚动在执行，则假定为“ 停止滚动”，您将逻辑调用为重新显示您隐藏的内容。

Answer 2

我进行了一些研究，但没有找到一种方法来检测没有setTimeout的滚动结束。

因此，建议您在created生命周期方法中，将事件监听器添加到滚动事件中，该事件将scrolling布尔值更改为true。您可以使用setTimeout将其每200ms更改为false。

在您的DOM中，如果不滚动，则使用v-if指令显示元素。

类似的东西：

new Vue({
  el: "#app",
  data: {
    scrolling: false
  },
  methods: {},
  created: function() {
    let isScrolling;
    window.addEventListener('scroll', () => {
      this.scrolling = true
      window.clearTimeout(isScrolling);
      isScrolling = setTimeout(() => {
        this.scrolling = false
      }, 400);
    }, false);
  }
})

<div id="app">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p v-if="!scrolling">
    NOT SCROLLING
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
  </p>
</div>

这里是jsfiddle

Answer 3

您应该寻找的术语是去抖事件。在这种情况下，滚动事件。为onscroll添加事件时，每次移动/滚动鼠标滚轮时，浏览器都会调度scrollevents。需要注意的一件事是，滚动事件将根据滚动轮多次触发。

因此，您现在要知道的是何时分派第一个scrollevent（scrolling = true），以及何时分派最后一个scroll事件（scrolling = false）。

首先让我们看一下代码，然后我们将深入进行解释。

    <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="@dimen/height_50dp"
            android:background="#f1f1f1">

\\define your any element here. Like back arrow or title

</android.support.v7.widget.Toolbar>

所以让我快速解释一下代码中发生了什么。

我们知道滚动触发了多个事件，因此我们将isScrolling设置为true（每次派发事件时都将设置为true）。然后，每次派发滚动事件时，我们都将尝试将isScrolling设置为false，假设当前事件是最后一个滚动事件，使用300ms延迟（或您希望提供的任何时间）。如果这不是最后一个事件，我们将取消先前存储在scrollTimeout中的setTimeout，然后使用当前事件再试一次。对于最后一个事件，最后一个setTimeout将不会被清除，因此将isScrolling设置为false。

这种处理事件的聪明而有趣的方式正在消退。我建议您阅读有关它的更多信息。

我希望它会有所帮助。

JS或vue中的滚动事件结束

3 个答案: