Vue框架学习笔记——事件scroll和wheel的区别

本文介绍: 描述 scroll 滚动条事件和wheel 鼠标滚轮事件，以及二者的不同

本人仅做个人学习记录，如有错误，请多包涵

scroll 事件绑定 html 页面中的指定滚动条，无论你拖拽滚动条，选中滚动条之后按键盘上下、pg up或pg dn、还是滚动鼠标滚轮，都能触发这个事件。
html 示例代码如下：

&lt;body&gt;
  <div id="box"&gt;
    <ul @scrool="f" class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      methods: {
        f(){
          console.log('触发了')
        }
      }
    })
  </script>
</body>

css 代码如下：

<style>
    .list{
      height:500px;
      width:200px;
      overflow: auto;
      background-color: orange;
    }
    li{
      height:200px;
      width:180px;
      background-color: white;
    }
</style>

参考链接：overflow
当内容溢出的时候，overflow: auto;会提供滚动条

在这里插入图片描述
和开头描述的一样，只要滚动条向指定方向还有移动的空间，无论什么方式使得滚动条滚动，都能触发scroll 事件，从而使得控制台输出’触发了’。

<ul @wheel="f" class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
</ul>

如果你觉得这篇文章写的不错，多多点赞~收藏吧！

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

li scroll 滚动条

文章 目录

前文提要

滚动条 滚动 事件 scroll

鼠标滚动事件 wheel

二者不同点

发表回复取消回复

前文提要

鼠标滚动事件 wheel

二者不同点

相关文章

发表回复 取消回复

发表回复取消回复