javascript - 想要水平滚动鼠标滚轮滚动 Nuxt js

Question

这是我的简单 HTML 标记样式。所以，当我使用鼠标滚轮时，我想水平滚动内容。 `

<div class="col-md-9" style="max-height: 80vh;overflow-y: hidden" id="scroll_container">
  <div class="container-fluid" >
                <div class="row flex-row flex-nowrap">
                  <div class="col-md-4">
                    Card 1
                  </div>
                  <div class="col-md-4 mb-4" >
                    Card 2
                  </div>
                  <div class="col-md-4">
                    Card 3
                  </div>
                  <div class="col-md-4">
                    Card 4
                  </div>
                </div>
              </div>
</div>

`

Answer 1

以下是我为使它更“Vue”所做的工作。我在要滚动的 HTML 元素上设置了一个 ref 以及一个 @mousewheel 事件。然后在触发方法中，我通过 $ref 引用该元素，并且几乎执行 OP 对 .scrollLeft += e.deltaY 所做的操作。

这是它的样子:

<div ref="scroll_container" @mousewheel="scrollX">
  ...
</div>

...

methods: {
  scrollX(e) {
    this.$refs['scroll_container'].scrollLeft += e.deltaY;
  },
},