Want horizontal scroll in mouse wheel scrolling Nuxt js

user_11699608 0
Viewed 1803

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>

`

vue.js css html javascript
2 Answers

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;
  },
},
user_60487150

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

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