如何将移动端滑动视图的webkit默认滚动条替换为指示点

实现方案 #

你需要的指示点样式无法直接通过修改webkit原生滚动条实现，可通过「隐藏原生滚动条+新增自定义指示点+联动滚动状态」的方式实现，具体代码修改如下：

1. 补充CSS隐藏原生滚动条，保留你原有样式的同时新增滚动条隐藏规则：

/* 隐藏webkit内核浏览器原生滚动条 */
.pw-swipe-view2::-webkit-scrollbar {
  display: none;
}
.pw-swipe-view2 {
  /* 兼容其他浏览器的滚动条隐藏规则 */
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* 以下是你原有样式，保留即可 */
  max-width:355px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-coordinate: 0 0;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: x mandatory;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  /* 原有display:none按需调整，需要显示时改为block/flex即可 */
}

2. 新增指示点HTML结构，放在.pw-swipe-view2容器的同级位置即可：

<!-- 指示点容器，有多少个section就加多少个span标签 -->
<div class="pw-swipe-dots">
  <span class="dot active"></span>
  <span class="dot"></span>
</div>

3. 新增指示点样式CSS：

.pw-swipe-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.pw-swipe-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cccccc;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* 激活态样式，可按需调整颜色、尺寸 */
.pw-swipe-dots .dot.active {
  background-color: #C7141A;
  width: 16px;
}

4. 新增JS实现滚动联动、点击跳转逻辑：

const swipeView = document.querySelector('.pw-swipe-view2');
const dots = document.querySelectorAll('.pw-swipe-dots .dot');
const sectionWidth = swipeView.querySelector('section').offsetWidth;

// 监听滚动事件，自动切换激活指示点
swipeView.addEventListener('scroll', () => {
  const activeIndex = Math.round(swipeView.scrollLeft / sectionWidth);
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === activeIndex);
  });
});

// 点击指示点，平滑跳转到对应内容页
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    swipeView.scrollTo({
      left: index * sectionWidth,
      behavior: 'smooth'
    });
  });
});

内容的提问来源于stack exchange，提问作者nespws