Here is my simple HTML markup style. So, when I am using the mouse wheel I want to scroll the content horizontally. `

<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>

`

Here is my simple HTML markup style. So, when I am using the mouse wheel I want to scroll the content horizontally. `

<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>

`

• javascript
• html
• css
• vue.js

2 Answers 2

Here's what I did to make it little more "Vue". I set a ref on the HTML element I want to scroll as well as a @mousewheel event. Then in the triggered method, I reference the element by $ref and pretty much do what OP did with the .scrollLeft += e.deltaY.

Here's what it looks like:

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

...

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

I need to add an event listener in vue created life cycle.

document.addEventListener('wheel', (e) => {
      document.getElementById('scroll_container').scrollLeft += e.deltaY;
    })