CSS 实现无滚动条滑动组件：丝滑顺畅，惊艳视觉！

前端

2023-09-03 16:06:30

CSS 实现无滚动条滑动组件

CSS 的 transform 属性和 transition 属性相结合，可以实现无滚动条的滑动组件。

弹性滑动

弹性滑动是指滑动组件在手指离开屏幕后，继续滑动一段距离。这可以通过在 transition 属性中设置 cubic-bezier(0.175, 0.885, 0.32, 1.275) 来实现。

快速滑动

快速滑动是指滑动组件在手指离开屏幕后，立即停止滑动。这可以通过在 transition 属性中设置 cubic-bezier(0.25, 0.1, 0.25, 1) 来实现。

慢速滑动

慢速滑动是指滑动组件在手指离开屏幕后，缓慢地停止滑动。这可以通过在 transition 属性中设置 cubic-bezier(0.42, 0, 0.58, 1) 来实现。

横向滑动

横向滑动是指滑动组件在水平方向上滑动。这可以通过在 transform 属性中设置 translateX() 来实现。

纵向滑动

纵向滑动是指滑动组件在垂直方向上滑动。这可以通过在 transform 属性中设置 translateY() 来实现。

完整示例

<div class="slider">
  <div class="slider-content">
    <p>第一页</p>
    <p>第二页</p>
    <p>第三页</p>
  </div>
</div>

.slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-content {
  display: flex;
  width: 300%;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider-content p {
  width: 100%;
  height: 100%;
}

const slider = document.querySelector('.slider');
const sliderContent = document.querySelector('.slider-content');

let startX = 0;
let currentX = 0;
let pageX = 0;

slider.addEventListener('touchstart', (event) => {
  startX = event.touches[0].pageX;
});

slider.addEventListener('touchmove', (event) => {
  currentX = event.touches[0].pageX;
  pageX = currentX - startX;
  sliderContent.style.transform = `translateX(${pageX}px)`;
});

slider.addEventListener('touchend', (event) => {
  if (pageX > 100) {
    sliderContent.style.transform = `translateX(-100%)`;
  } else if (pageX < -100) {
    sliderContent.style.transform = `translateX(100%)`;
  } else {
    sliderContent.style.transform = `translateX(0)`;
  }
});