xvc用户3337
前端笔试题：原生虚拟滚动条组件
输入“/”快速插入内容
前端笔试题：原生虚拟滚动条组件
前端笔试题：原生虚拟滚动条组件
【考核申明与开发方式说明】
本项目高度推荐并鼓励你配合任何相关的 AI 工具完成开发。
但请注意，为了考察你驾驭 AI 生成代码以及遵守工程纪律的能力，你最终提交的代码须遵守文末附件所列出的 AGENTS.md 推荐配置。
视频中截图效果:
SVG素材
svg.tar.bz2
1.11KB
题目背景
禁止使用任何第三方前端框架（如 Vue、React 等）。我们需要写一个通用的“虚拟滚动条” (v-scroll) 网页组件。为了保障组件隔离，我们使用浏览器原生 API 实现。
需求说明
请使用原生 JavaScript (ESM) 和原生 CSS 嵌套语法，实现一个 <v-scroll> 标签组件。该组件需实现真实的容器内容滚动，并满足以下技术要求：
1. 结构与样式隔离（原生自定义组件）
•
必须使用 customElements 注册名为 v-scroll 的组件。
•
组件需要代理页面上使用 <v-scroll>内容段落</v-scroll> 包裹的任意 DOM 内容。
•
核心实现原理提示：请注意，这是基于原生滚动 + 自定义外观的方案。外层容器是一个真实的 overflow: auto 原生滚动容器，但是你需要通过 CSS 巧妙隐藏掉操作系统的默认滚动条，并另外用自定义 DOM（如 <b part="bar"> 等组合）去充当假滑块从而完全接管外观。
•
样式要求：滚动轨道、滑块的样式不能写在 JavaScript 的 Shadow DOM 中，必须提取到独立的 CSS 样式表中，且利用最新 CSS 伪元素暴露给外部控制。要求外部 CSS 能定义：
◦
滑块在悬停和拖拽时的状态变化（变量穿透）。
2. 尺寸探测与生命周期管理
•
组件使用原生尺寸观察者（Resize Observer）监听滚动容器与其实际内容高度的差值变化，以动态决定是否显示自定义的滚动条结构。
•
滑块的高度必须根据内容高度自适应，并设定最低下限（如 16px）。
•
实现组件销毁逻辑：在路由切换等场景下，如果该组件脱离文档流，必须探测出这一变化并主动销毁内部定时器、解绑滚动与观察者监听。
3. 指针捕捉与拖拽映射
•
拖拽滑块时，为了防止鼠标脱离滑块导致拖拽失效或文本被异常选中。
•
强制要求：使用原生指针事件（Pointer Events）及其相关捕捉 API 完成拖拽。
•
滚动映射算法：拖拽滑块上下移动时，需要计算其 Y 轴像素偏移量，并按比例映射到滚动容器的 scrollTop 属性。需考虑滑块上下两端的 CSS 像素预留间距（如 3px）。
4. 基于 Vite Hook 的 CSS 模块化构建
•
为了在组件发布后能够方便地替换 CSS 定制项目样式，项目首页配置了原生的模块引用映射（Import Map）：
代码块
<script type="importmap">
{
"imports": {
"$/": "/主题路径/"
}
}
</script>
•
构建层考点：原生 v-scroll.js 内部可以使用 import CSS from "$/v-scroll.js"; 为全局导入样式（往 docuemt head 中注入 style ）。第三方，修改 importmap 就可以切换主题。
•
强制要求：实现一个 Vite 自定义插件（Plugin），利用 Vite configResolved 钩子（Hook）读取该组件对应的原生 .css 源码文件，用库去除空白与注释进行压缩，并将其包装为 export default '...'; 格式的 JS 模块，自动写入到 /路径/v-scroll.js。
提交要求
请提交以下两项产物以供评审：