Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of Vue's Scroll scrolling event trigger method, the content is detailed and easy to understand, the operation is simple and fast, and it has certain reference value. I believe you will gain something after reading this Vue Scroll scrolling event trigger mode. Let's take a look at it.

Scroll scrolling event trigger

Remember that when you need a scrolling event to trigger, do not add overflow-y: auto;, once added, it is all zero.

Examples

Remove overflow-y: auto

If you need to introduce this page as a subcomponent, you need to add true, because if you look at the last picture, if you don't add true and don't become a capture event, you won't be able to reference it successfully.

Export default {name: "totop", data () {return {btnFlag: false,};}, / / use VUE to write a print of the current scrollTop on the console. First, add a scrolling listening event mounted () {window.addEventListener ("scroll", this.scrollToTop,true) to window in the mounted hook; / / if you need to introduce this page as a subcomponent, you need to add true because see the last picture}, destroyed () {window.removeEventListener ("scroll", this.scrollToTop,true) }, methods: {/ / Click the image to go back to the top method. Add a timer to make the transition smooth backTop () {let that = this; let timer = setInterval (() = > {let ispeed = Math.floor (- that.scrollTop / 5)) Document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed; if (that.scrollTop = 0) {clearInterval (timer);}}, 16) }, / / listen back to the distance between the top button and the top of the browser. If the scrolling distance is greater than the browser height, set btnFlag to true, otherwise it will be false scrollToTop () {let that = this; let scrollTop = window.pageYOffset | | document.documentElement.scrollTop | | document.body.scrollTop; that.scrollTop = scrollTop Console.log (scrollTop) / / in order to calculate the height from the top, when the height is greater than 50, the top icon is displayed, and if it is less than 50, the if is hidden (that.scrollTop > 50) {that.btnFlag = true;} else {that.btnFlag = false;},},} .totop {position: fixed; right: 40px; bottom: 60px; width: 50px; height: 50px; padding: 10px; cursor: pointer;}. Imga {position: relative; top:-20px; left: 15px; text-align: center; line-height: 50px; border: 3px solid # CF9B6B; width: 50px; height: 50px; border-radius: 50%;}

Invalid listening for Scroll event

1. The listening dom element sets the height, and the content of the child element should exceed the height of the container.

two。 Set overflow to: auto/scroll, default to visible, and cannot trigger

This is the end of the article on "how Vue's Scroll scrolling event triggers". Thank you for reading! I believe you all have a certain understanding of the knowledge of "what is the triggering mode of Scroll scrolling events in Vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.