Cara membatalkan vue atas dan bawah blur

Dalam Vue.js, kadangkala kami akan mencipta paparan tatal dan anda mungkin menemui beberapa kesan pelik dalam paparan tatal. Salah satunya ialah kesan blur atas dan bawah. Kesan ini menjadikan paparan skrol anda kelihatan pudar masuk dan keluar.

Tetapi kadangkala, anda mungkin mahu membatalkan kesan ini. Kerana kesan ini kadangkala tidak begitu menarik dan boleh mengelirukan pengguna. Dalam artikel ini, kami akan memperkenalkan cara membatalkan kesan kabur atas dan bawah Vue.

Kaedah pertama: batalkan kesan lantunan tatal

Tingkah laku tatal lalai Vue.js akan memberikan paparan tatal anda kesan anjal. Apabila anda menatal ke bawah atau atas, paparan tatal akan mengembalikan beberapa jarak Tingkah laku ini ialah kesan lantunan tatal. Jika anda ingin membatalkan kesan kabur atas dan bawah, anda boleh berbuat demikian dengan membatalkan kesan lantunan tatal.

Anda boleh memperkenalkan kod berikut dalam mounted cangkuk kitar hayat komponen:

mounted () {
  const container = this.$refs.container;
  container.addEventListener('touchmove', this.preventScroll, { passive: false });
  container.addEventListener('touchend', this.allowScroll, { passive: false });
},
methods: {
  preventScroll (event) {
    event.preventDefault();
  },
  allowScroll () {
    const container = this.$refs.container;
    const scrollTop = container.scrollTop;
    const scrollHeight = container.scrollHeight;
    const height = container.clientHeight;
    const maxScroll = scrollHeight - height;
    if (scrollTop === 0 || scrollTop === maxScroll) {
      container.removeEventListener('touchmove', this.preventScroll);
    }
  }
}

Kod di atas akan membatalkan kesan lantunan tatal, dan ia juga akan mengendalikan tatal ke keadaan atas dan bawah. Kaedah ini tidak akan berfungsi jika anda telah menetapkan overflow: hidden dalam paparan tatal anda.

Kaedah kedua: Gunakan beberapa helah CSS

Jika anda tidak mahu melumpuhkan kesan lantunan tatal, maka anda boleh menggunakan beberapa helah CSS untuk membatalkan kesan kabur naik dan turun Vue.

Anda boleh menambah kod berikut pada helaian gaya komponen anda:

::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

Kod di atas adalah untuk penyemak imbas berasaskan Webkit (seperti Chrome atau Safari), yang akan menyembunyikan bar skrol Dan batalkan kesan kabur atas dan bawah. Jika anda ingin menyokong jenis pelayar lain (seperti Firefox), anda boleh menggunakan kod berikut:

* {
  scrollbar-width: none !important;
}

Kod di atas akan menyembunyikan bar skrol dalam semua elemen. Walau bagaimanapun, perlu diingatkan bahawa kaedah ini akan membatalkan kedua-dua bar skrol mendatar dan menegak.

Kaedah ketiga: Gunakan arahan tersuai

Vue.js mempunyai ciri arahan tersuai yang membolehkan kami menambah logik pemprosesan peristiwa kompleks pada elemen HTML. Kita boleh menggunakan ciri ini untuk membatalkan kesan kabur atas dan bawah.

Tambahkan arahan tersuai berikut dalam kod:

Vue.directive('disable-scroll', {
  inserted: function (el) {
    el.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, { passive: false });
  }
});

Kod di atas akan melumpuhkan gelagat lalai acara tatal. Anda boleh menambah arahan v-disable-scroll pada elemen HTML anda untuk melumpuhkan penatalan ke atas dan ke bawah.

Ringkasan

Di atas ialah tiga kaedah untuk membatalkan kesan kabur atas dan bawah Vue. Kaedah ini membolehkan anda mencapai pengalaman interaktif yang lebih mesra pengguna dalam aplikasi Vue.js. Bergantung pada keperluan khusus anda, anda boleh memilih kaedah untuk mencapai matlamat anda. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara membatalkan vue atas dan bawah blur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!