如何禁用转盘中某些元素上的触摸事件

Question

我正试图为网站的标题部分构建一个旋转木马。我正在尝试阻止允许滚动经过第一个元素和最后一个元素的触摸事件，但我一直无法做到这一点。我查找了一些过去的答案，并尝试使用getBoundingClientRect来获取第一个元素的宽度并阻止滚动，但这禁用了整个滚动功能。

HTML和PHP。该网站是一个WordPress网站，所以我不得不从数据库中查询转盘的信息。

const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const track = document.querySelector('.track');
const carouselWidth = document.querySelector('.carousel-container').getBoundingClientRect().width;
let index = 0;
let initialPosition = null;
let moving = false;
let transform = 0;
next.addEventListener('click', () => {
index++;
prev.classList.add('show');
track.style.transform = `translateX(-${index * carouselWidth}px)`;
if (track.offsetWidth - (index * carouselWidth) < carouselWidth) {
next.classList.add('hide');
}
});
prev.addEventListener('click', () => {
index--;
next.classList.remove('hide');
if (index === 0) {
prev.classList.remove('show');
}
track.style.transform = `translateX(-${index * carouselWidth}px)`
})
const gestureStart = (e) => {
initialPosition = e.pageX;
moving = true;
const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');
if (transformMatrix !== 'none') {
transform = parseInt(transformMatrix.split(',')[4].trim());
}
prev.classList.add('show');
}
const gestureMove = (e) => {
if (moving) {
const currentPosition = e.pageX;
const diff = currentPosition - initialPosition;
track.style.transform = `translateX(${transform + diff}px)`;
}
};
const gestureEnd = (e) => {
moving = false;
}
if (window.PointerEvent) {
window.addEventListener('pointerdown', gestureStart);
window.addEventListener('pointermove', gestureMove);
window.addEventListener('pointerup', gestureEnd);
} else {
window.addEventListener('touchdown', gestureStart);
window.addEventListener('touchmove', gestureMove);
window.addEventListener('touchup', gestureEnd);
window.addEventListener('mousedown', gestureStart);
window.addEventListener('mousemove', gestureMove);
window.addEventListener('mouseup', gestureEnd);
}

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider-container {
background-color: #fff;
border-bottom: 1px solid #d0d0d0;
display: block;
height: 120px;
overflow: hidden;
padding: 0;
}
.slider-header {
line-height: 8px;
margin: 10px 0 0;
padding: 0 0 0 15px;
text-transform: uppercase;
}
.slider-header:before {
background-color: #d0d0d0;
content: '';
display: block;
height: 1px;
margin-right: -20px;
position: relative;
top: 6px;
}
.slider-header_text {
background-color: #fff;
display: inline-block;
padding: 0 10px 0 0;
position: relative;
}
.slider {
position: relative;
}
button {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #aaa;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #F9E929;
cursor: pointer;
}
.carousel-container {
width: 1280px;
margin: auto;
min-height: 100px;
position: relative;
}
.carousel-container .carousel-inner {
overflow: hidden;
}
.carousel-container .track {
display: inline-flex;
transition: transform 0.5s;
touch-action: none;
}
.carousel-container .track .card-container {
width: 256px;
height: 100px;
padding-right: 5px;
}
.carousel-container .track .card-container .card {
border-right: 1px solid #ccc;
display: flex;
justify-content: space-around;
margin-top: 20px;
text-decoration: none;
color: black;
}
.nav .prev {
left: -30px;
display: none;
}
.nav .prev.show {
display: block;
}
.nav .next {
right: -30px;
}
.nav .next.hide {
display: none;
}
.card .img img {
height: auto;
width: auto;
max-width: 88px;
max-height: 59px;
}
.card .info h5 {
padding-left: 5px;
max-width: 150px;
}
@media (min-width: 768px) and (max-width: 1024px) {
.button {
display: none;
}
.carousel-container {
width: 100vw;
}
.carousel-container .track .card-container {
width: 25vw;
}
}
@media(max-width: 500px) {
.slider-container {
border-bottom: none;
height: 200px;
margin-bottom: 50px;
}
.slider-header {
display: none;
}
button {
display: none;
}
.carousel-container {
width: 100vw;
min-height: 200px;
}
.carousel-container .track .card-container {
width: 40vw;
height: 200px;
}
.card .img img {
width: 100%;
height: 100%;
position: relative;
}
.carousel-container .track .card-container .card {
border-right: none;
display: block;
position: relative;
margin-top: 20px;
margin-left: 5px;
}
.card .info h5 {
padding-left: 0;
max-width: 100%;
font-weight: 700;
}
}

<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
<?php 
global $wpdb;               
$query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'posts',
));
$posts =  $query -> posts;
foreach ($posts as $post) {

echo '
<div class="card-container">
<a href="'.$post->guid.'" class="card">
<div class="img">
<img src="'.get_the_post_thumbnail_url( $post -> ID, 'thumbnail' ).'" alt="">
</div>
<div class="info">
<h5>'.$post->post_title.'</h5>
</div>
</a>
</div>';
}


?>
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>

在我使用纯HTML、CSS和Javascript将其转移到网上之前，我已经在本地环境中做到了这一点。我在jsfiddle上发布了代码。可以通过此链接访问https://jsfiddle.net/jqs62tp1/.

Answer 1

不确定这是否正是您所需要的，但您可以尝试通过CSS:禁用touch-events

/* styles applied to all card-containers except the first and last */
.card-container:not(:first-child),
.card-container:not(:last-child) {
touch-action: none;
}

更多详细信息https://css-tricks.com/almanac/properties/t/touch-action/