Component Props about eno-auto-scroll

[davidww2]

hi
Further to my comment the above
I solved the problem is-mouse-stop:
I used your Component Ref function-
I added events @mouseOver @mouseout

<EnoAutoScroll ref="enoAutoScroll" :duration="20000">
             <div class="li" v-for="news in navNews" :key="news.id" @mouseover="enoAutoScrollPauseScroll" @mouseout="enoAutoScrollKeepScroll">
               {{ news.data }}
               <span class="date">{{ news.date }}</span>
             </div>
           </EnoAutoScroll>

methods: {
  enoAutoScrollPauseScroll() {
     this.$refs.enoAutoScroll.pauseScroll();
   },

   enoAutoScrollKeepScroll() {
     this.$refs.enoAutoScroll.keepScroll();
   }
}

thank you

[genophy]

hi
Further to my comment the above
I solved the problem is-mouse-stop:
I used your Component Ref function-
I added events @mouseOver @mouseout

<EnoAutoScroll ref="enoAutoScroll" :duration="20000">
             <div class="li" v-for="news in navNews" :key="news.id" @mouseover="enoAutoScrollPauseScroll" @mouseout="enoAutoScrollKeepScroll">
               {{ news.data }}
               <span class="date">{{ news.date }}</span>
             </div>
           </EnoAutoScroll>

methods: {
  enoAutoScrollPauseScroll() {
     this.$refs.enoAutoScroll.pauseScroll();
   },

   enoAutoScrollKeepScroll() {
     this.$refs.enoAutoScroll.keepScroll();
   }
}

thank you

@reply

this component has add the 'mouseover' and 'mouseout' event listener.

the source:

 that.$refs.enoAutoScroll.addEventListener('mouseover', (e) => {
  e.preventDefault();
  e.stopPropagation();
  that.pauseScroll();
});
that.$refs.enoAutoScroll.addEventListener('mouseout', (e) => {
  e.preventDefault();
  e.stopPropagation();
  that.keepScroll();
});

I copy your first code and set the height. and it works well

<EnoAutoScroll style="height: 200px" :duration="20000">
  <div v-for="news in navNews" :key="news.id" class="li"> {{ news.data }} <span class="date">{{ news.date }}</span></div>
</EnoAutoScroll>

[davidww2]

hi
Further to my comment the above
I solved the problem is-mouse-stop:
I used your Component Ref function-
I added events @mouseOver @mouseout

<EnoAutoScroll ref="enoAutoScroll" :duration="20000">
             <div class="li" v-for="news in navNews" :key="news.id" @mouseover="enoAutoScrollPauseScroll" @mouseout="enoAutoScrollKeepScroll">
               {{ news.data }}
               <span class="date">{{ news.date }}</span>
             </div>
           </EnoAutoScroll>

methods: {
  enoAutoScrollPauseScroll() {
     this.$refs.enoAutoScroll.pauseScroll();
   },

   enoAutoScrollKeepScroll() {
     this.$refs.enoAutoScroll.keepScroll();
   }
}

thank you

@reply

this component has add the 'mouseover' and 'mouseout' event listener.

the source:

 that.$refs.enoAutoScroll.addEventListener('mouseover', (e) => {
  e.preventDefault();
  e.stopPropagation();
  that.pauseScroll();
});
that.$refs.enoAutoScroll.addEventListener('mouseout', (e) => {
  e.preventDefault();
  e.stopPropagation();
  that.keepScroll();
});

I copy your first code and set the height. and it works well

<EnoAutoScroll style="height: 200px" :duration="20000">
  <div v-for="news in navNews" :key="news.id" class="li"> {{ news.data }} <span class="date">{{ news.date }}</span></div>
</EnoAutoScroll>

thank you so much