使用 Next.js 实现界面美观的滚动条-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，滚动条是一个基本的组件，但是默认的浏览器滚动条样式往往不够美观，可能与当前的页面设计不协调，影响用户体验。因此，我们需要一个快速、简单且美观的解决方案。

本文将介绍如何使用 Next.js 实现界面美观的滚动条：

第一步：安装依赖

使用 Next.js 必须先安装 Node.js 与 npm，以便在本地搭建环境。

首先，在项目根目录下打开终端，输入以下命令：

npm init -y  # 初始化 package.json 文件
npm i next react react-dom  # 安装 Next.js 和 React

第二步：创建页面

创建一个新页面，并在页面中添加一个滚动条组件。

// javascriptcn.com 代码示例
// pages/index.js
import React from 'react';
import Scrollbar from 'react-custom-scrollbars';
import styles from './index.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to Next.js!</h1>
      <Scrollbar style={{ width: '100%', height: '300px' }}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </Scrollbar>
    </div>
  )
}

在上述代码中，我们通过 react-custom-scrollbars 库引入了一个自定义滚动条组件，使用 styles.container 定义了容器样式。

第三步：美化滚动条

现在我们的滚动条已经能够正常工作，但它并不美观。我们需要修改滚动条的样式，以符合页面设计。

// javascriptcn.com 代码示例
/* pages/index.module.css */
.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #999;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

上述代码中，我们通过 ::-webkit-scrollbar 伪元素选中了滚动条本身，并通过 ::-webkit-scrollbar-thumb 设置了滚动条的颜色和圆角半径，通过 ::-webkit-scrollbar-track 设置了滚动条的轨道颜色。

第四步：完善交互

我们还可以通过 JavaScript 代码来优化滚动条的交互，使其更加自然和灵活。

// javascriptcn.com 代码示例
// pages/index.js
export default function Home() {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    const scrollbar = el.querySelector('.scrollbar-vertical');
    let isDragging = false;
    let start = 0;
    let current = 0;

    scrollbar.addEventListener('mousedown', (event) => {
      isDragging = true;
      start = event.clientY;
      scrollbar.style.cursor = '-webkit-grabbing';
    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
      scrollbar.style.cursor = '-webkit-grab';
    });

    el.addEventListener('mousemove', (event) => {
      if (!isDragging) return;
      current = event.clientY;
      el.scrollTop += (start - current) * 2;
      start = current;
    });
  }, []);

  return (
    <div className={styles.container} ref={ref}>
      <h1>Welcome to Next.js!</h1>
      <Scrollbar style={{ width: '100%', height: '300px' }}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </Scrollbar>
    </div>
  )
}

上述代码中，我们通过 useRef 钩子函数获取容器节点，监听 mousedown 事件判断当前是否正在拖拽滚动条，计算当前滚动条位置，最后通过 addEventListener 注册鼠标事件。

总结

在本文中，我们了解了如何使用 Next.js 实现界面美观的滚动条，包括安装依赖、创建页面、美化滚动条和完善交互。通过定制滚动条样式和交互，可以使页面更加美观和易用。希望本文对你有所帮助，愉快开发！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654df9cf7d4982a6eb752c70