vue.js 在轮播中进行水平滚动时锁定垂直滚动

wko9yo5t  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(185)

我在一个Vue.js应用程序中工作,在其中一个页面中,我有3个用户可以水平滚动的转盘,我想禁用垂直滚动,因为现在当用户水平滚动时,布局会上下移动一点。
我找到了一种方法来禁用垂直滚动(实际上是所有的滚动功能),但为了向上或向下滚动,用户需要开始触摸旋转木马外部的屏幕,这导致了最差的用户体验。
这是我当前解决方案:

// Method for handling scroll
const touchMoveHandler = event => {
  if(event.cancelable) event.preventDefault();
}

// Get all the carousels
let carousels = document.querySelectorAll('.v-scroller');

// Handle scrolling
for (const carousel of carousels) {

  // Add event listener on touchstart to remove scrolling functionality
  carousel.addEventListener('touchstart', event => {
    window.addEventListener('touchmove', touchMoveHandler(event), {passive: false});
  });

  // Remove previous event listener on touchend
  carousel.addEventListener('touchend', event => {
    window.removeEventListener('touchmove', touchMoveHandler(event));
  });
}

在像www.example.com这样的网站上twich.tv/netflix,有一些转盘,一旦你开始水平滚动,你就不能垂直滚动。但是如果你触摸转盘,你就可以向上或向下滚动,而不是水平滚动。
你知道他们是怎么实现的吗?
任何帮助都将不胜感激,提前感谢。

bqujaahr

bqujaahr1#

对于触摸操作,可以尝试使用css属性touch-action
touch-action: pan-x
这将只允许水平滚动。

相关问题