滚动时移动按钮

滚动时移动按钮是一种常见的用户界面组件，用于让用户在滚动视图中快速定位到某个位置。当用户滚动视图时，移动按钮会跟随滚动条一起滚动，当用户点击移动按钮时，视图会滚动到相应的位置。

实现方式

HTML/CSS

在 HTML 中，可以使用 scrollbar-track 和 scrollbar-thumb 来自定义滚动条的样式。通过在滚动条上添加一个按钮元素，在特定事件触发时更新按钮的位置即可实现以滚动时移动按钮的效果。

以下是一个示例代码片段：

<div class="scrollable">
  <div class="content">
    ...
  </div>
  <div class="scrollbar">
    <div class="scrollbar-thumb"></div>
    <button class="scrollbar-button"></button>
  </div>
</div>

.scrollable {
  overflow-y: scroll;
  position: relative;
}

.scrollbar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.scrollbar-thumb {
  /* 自定义滚动条样式 */
  width: 8px;
  background-color: #ccc;
}

.scrollbar-button {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: #eee;
  cursor: pointer;
}

在 JavaScript 中，可以通过监听 scroll 事件和 click 事件来实现移动按钮的效果。当用户滚动时，更新按钮的位置。当用户点击按钮时，滚动到对应位置。

const scrollbarButton = document.querySelector('.scrollbar-button');
const contentContainer = document.querySelector('.scrollable .content');

scrollable.addEventListener('scroll', () => {
  // 更新按钮的位置
  const { scrollTop, scrollHeight, clientHeight } = contentContainer;
  const thumb = document.querySelector('.scrollbar-thumb');
  const thumbHeight = clientHeight / scrollHeight * clientHeight;
  const thumbTop = scrollTop / scrollHeight * clientHeight;
  thumb.style.height = `${thumbHeight}px`;
  thumb.style.top = `${thumbTop}px`;
});

scrollbarButton.addEventListener('click', () => {
  // 滚动到指定位置
  contentContainer.scrollTo({
    top: contentContainer.scrollTop + 100, // 滚动距离
    behavior: 'smooth', // 滚动动画
  });
});

React

在 React 中，可以使用 react-custom-scrollbars 库来定制滚动条的样式，并通过事件处理函数来实现移动按钮的效果。

以下是一个示例代码片段：

import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';

export default function CustomScrollbar() {
  const thumbRef = React.useRef(null);
  const contentRef = React.useRef(null);
  const [thumbTop, setThumbTop] = React.useState(0);

  const handleScroll = React.useCallback(({ scrollTop, scrollHeight, clientHeight }) => {
    // 更新按钮的位置
    const thumbHeight = clientHeight / scrollHeight * clientHeight;
    const newThumbTop = scrollTop / scrollHeight * clientHeight;
    setThumbTop(newThumbTop);
    thumbRef.current.style.height = `${thumbHeight}px`;
  }, []);

  const handleClick = React.useCallback(() => {
    // 滚动到指定位置
    contentRef.current.scrollTop += 100;
  }, []);

  return (
    <Scrollbars
      onScroll={handleScroll}
      renderThumbVertical={({ style, ...props }) => (
        <div ref={thumbRef} {...props} style={{ ...style, top: thumbTop }} className="thumb" />
      )}
      renderView={({ style, ...props }) => (
        <div ref={contentRef} {...props} style={{ ...style }} className="content" />
      )}
    >
      ...
      <button onClick={handleClick} className="scrollbar-button" />
    </Scrollbars>
  );
}

参考

• Custom Scrollbars in CSS