用 js 实现推拉式滚动效果

实现推拉式滚动效果可以通过以下步骤：

1. 在 HTML 中创建一个包含内容的容器，设置其高度和宽度，并将 `overflow` 属性设置为 `hidden`，以隐藏超出容器大小的内容。

<div class="container">
  <p>第一页的内容</p>
  <p>第二页的内容</p>
  <p>第三页的内容</p>
</div>

2. 使用 JavaScript 获取容器和内容的高度，并计算每个页面的高度。

const container = document.querySelector('.container');
const content = container.querySelector('p');
const contentHeight = content.offsetHeight;
const containerHeight = container.offsetHeight;
const pageCount = Math.ceil(contentHeight / containerHeight);
const pageHeight = contentHeight / pageCount;

3. 创建一个变量 `currentPage` 来跟踪当前页面的索引，初始值为 0。在容器中创建一个滑动条，用于控制页面的滚动。

let currentPage = 0;
const slider = document.createElement('div');
slider.className = 'slider';
container.appendChild(slider);

4. 为滑动条添加事件监听器，在滑动条被拖动时更新页面的位置。

slider.addEventListener('mousedown', startDragging);

function startDragging(e) {
  const startY = e.clientY;
  const startScrollTop = container.scrollTop;

  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDragging);

  function drag(e) {
    const deltaY = e.clientY - startY;
    container.scrollTop = startScrollTop + deltaY;
  }

  function stopDragging() {
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', stopDragging);
  }
}

5. 在滑动容器时，根据当前滚动位置计算出当前页数，并将滑动条的位置设置为当前页数的百分比。

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const currentPage = Math.floor(scrollTop / pageHeight);
  const sliderPosition = (currentPage + 0.5) / pageCount * 100;
  slider.style.top = `${sliderPosition}%`;
});

6. 当滑动条被拖动时，根据滑动条的位置计算出当前页数，并将容器滚动到当前页的位置。

function drag(e) {
  const sliderY = e.clientY - container.getBoundingClientRect().top;
  const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1));
  const currentPage = Math.floor(sliderPosition * pageCount);
  const scrollTop = currentPage * pageHeight;
  container.scrollTop = scrollTop;
}

完整代码如下：

<style>
  .container {
    height: 200px;
    width: 300px;
    overflow: hidden;
    position: relative;
  }

  .slider {
    position: absolute;
    top: 50%;
    left: calc(100% - 10px);
    transform: translate(-50%, -50%);
    width: 10px;
    height: 50px;
    background-color: gray;
    border-radius: 5px;
    cursor: pointer;
    transition: top 0.2s ease-in-out;
  }
</style>

<div class="container">
  <p>第一页的内容</p>
  <p>第二页的内容</p>
  <p>第三页的内容</p>
  <div class="slider"></div>
</div>

<script>
  const container = document.querySelector('.container');
  const content = container.querySelector('p');
  const contentHeight = content.offsetHeight;
  const containerHeight = container.offsetHeight;
  const pageCount = Math.ceil(contentHeight / containerHeight);
  const pageHeight = contentHeight / pageCount;
  let currentPage = 0;
  const slider = document.createElement('div');
  slider.className = 'slider';
  container.appendChild(slider);

  slider.addEventListener('mousedown', startDragging);

  function startDragging(e) {
    const startY = e.clientY;
    const startScrollTop = container.scrollTop;

    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', stopDragging);

    function drag(e) {
      const deltaY = e.clientY - startY;
      container.scrollTop = startScrollTop + deltaY;
    }

    function stopDragging() {
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', stopDragging);
    }
  }

  container.addEventListener('scroll', () => {
    const scrollTop = container.scrollTop;
    const currentPage = Math.floor(scrollTop / pageHeight);
    const sliderPosition = (currentPage + 0.5) / pageCount * 100;
    slider.style.top = `${sliderPosition}%`;
  });

  function drag(e) {
    const sliderY = e.clientY - container.getBoundingClientRect().top;
    const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1));
    const currentPage = Math.floor(sliderPosition * pageCount);
    const scrollTop = currentPage * pageHeight;
    container.scrollTop = scrollTop;
  }
</script>