Bilibili-Evolved自定义滚动行为：平滑滚动与定位-优快云博客

Bilibili-Evolved自定义滚动行为：平滑滚动与定位

在浏览哔哩哔哩视频或动态时，你是否曾因页面跳转后播放器位置错乱而烦恼？是否希望滚动体验更加流畅优雅？Bilibili-Evolved提供了丰富的滚动行为定制功能，让我们一起探索如何通过这些功能提升浏览体验。

视频页面加载后自动将播放器定位到视野中心，是Bilibili-Evolved最实用的功能之一。这一功能由registry/lib/components/video/player/focus/index.ts模块实现，核心代码通过scrollIntoView() API实现精准定位：

element.scrollIntoView()
if (options.offset !== 0) {
  window.scrollBy(0, options.offset)
}

用户可通过"定位偏移量"选项调整最终位置，默认值为-10像素，适应不同屏幕尺寸和个人习惯。这一功能在番剧页面尤为实用，系统会自动将播放器定位至上次观看位置，如src/components/video/player-agent/bangumi-player.ts中所示。

当视频播放器滚动出视野时，Bilibili-Evolved可自动暂停视频播放。这一功能由registry/lib/components/video/player/intersection-actions/index.ts实现，通过Intersection Observer API监测播放器可见性：

new IntersectionObserver(
  ([e]) => {
    e.isIntersecting ? intersectingCall() : disIntersectingCall()
  },
  { threshold: getToTop(mode) }
)

用户可在设置中选择触发位置（视频顶部/中间/底部），以及是否启用自动暂停和自动开灯功能，实现个性化的浏览体验。

在浏览动态图片时，系统会智能管理滚动位置。当用户退出图片预览模式，页面会自动滚动回原图片位置并调整偏移量：

const scrollIntoView = (element: Element) => {
  element?.scrollIntoView()
  window.scrollBy({ top: -75 })
}

这一功能在registry/lib/components/feeds/image-auto-back-to-top/index.ts中实现，确保用户浏览体验的连贯性。

Bilibili-Evolved提供了美化的滚动条样式，替代浏览器默认样式。通过registry/lib/components/style/scrollbar/index.ts引入自定义样式：

instantStyles: [
  {
    name: 'elegant-scrollbar',
    style: () => import('./scrollbar.scss'),
  }
]

这一功能特别适合Windows系统用户，提供更现代、简洁的滚动体验。macOS用户可根据个人喜好选择启用或禁用。

在首页和动态页面，系统会根据滚动位置显示顶部/底部遮罩效果，增强页面层次感。这一效果在registry/lib/components/style/home-redesign/fresh/scroll-mask.ts中实现：

container.classList.toggle('scroll-top', isScrollTop)
container.classList.toggle('scroll-bottom', isScrollBottom)

开发者可通过扩展以下模块自定义滚动行为：

通过修改这些模块，可实现更个性化的滚动体验，如添加滚动动画、自定义触发阈值等高级功能。

Bilibili-Evolved的滚动行为定制功能，通过精准的定位控制、智能的交互逻辑和优雅的视觉设计，显著提升了哔哩哔哩网站的浏览体验。无论是视频观看还是动态浏览，用户都能享受到流畅、自然的滚动体验，减少操作摩擦，专注于内容本身。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考