纯原生横向分页别再发 PDFCSS Scroll Snap 做手机预览用 cpolar 给同事短时验收有些内容天生就是“一屏一页”的节奏活动分镜、产品亮点、培训卡片、版本说明。把它们导成 PDF桌面端看着整齐手机上却常要放大、缩小、反复翻。更顺手的做法是直接做一个原生横向分页预览页每一屏就是一张卡左右滑动切页页面自己负责停靠和页码。这篇只做只读原型不用轮播库不接后台不连数据库不做上传。页面只放虚构文案或公开样图先在本机跑通再用 cpolar 验收。一、先把内容切成“页”横向分页最怕一上来就写代码最后发现内容结构不对。先按“封面 / 亮点 / 场景 / 收尾”拆页每页只表达一个重点。例如产品说明可切成第 1 页封面和一句话定位第 2 页3 个核心亮点第 3 页适用场景第 4 页验收说明或收尾页培训卡片也一样第 1 页课程标题第 2 页学习目标第 3 页操作步骤第 4 页注意事项原则很简单每页只做一件事页内文字尽量短图片尽量轻。二、先搭原生结构最小结构只有三层外层滚动容器、横向轨道、每一张分页卡。div classviewer tabindex0 aria-label横向分页预览 section classpage hero h1新品发布分镜/h1 p把长内容拆成一屏一页手机滑动更顺。/p /section section classpage h2亮点 1/h2 p一页只讲一个重点减少跳读。/p /section section classpage h2亮点 2/h2 p左右滑动切页停靠后自动对齐。/p /section /div div classpager idpager1 / 3/div.viewer { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .viewer::-webkit-scrollbar { display: none; } .page { flex: 0 0 100%; min-height: 100vh; scroll-snap-align: start; box-sizing: border-box; padding: 24px; }这套写法的关键是display: flex让页面横向排开。overflow-x: auto允许横向滚动。scroll-snap-type: x mandatory让滚动后自动吸附。flex: 0 0 100%保证每页占满视口宽度。这样做出来的是一个可读的横向分页页。三、用最少脚本补上页码和键盘控制CSS 已经能完成大半体验脚本只做两件事更新页码、支持左右键切页。script const viewer document.querySelector(.viewer); const pages [...document.querySelectorAll(.page)]; const pager document.getElementById(pager); function updatePager() { const index Math.round(viewer.scrollLeft / viewer.clientWidth) 1; pager.textContent ${index} / ${pages.length}; } viewer.addEventListener(scroll, () requestAnimationFrame(updatePager)); viewer.addEventListener(keydown, (e) { if (e.key ArrowRight) viewer.scrollBy({ left: viewer.clientWidth, behavior: smooth }); if (e.key ArrowLeft) viewer.scrollBy({ left: -viewer.clientWidth, behavior: smooth }); }); updatePager(); /script给.viewer加tabindex0它就能接收键盘焦点。桌面上按左右键就能翻页验收时很方便。四、把手机阅读感做出来手机端验收时不只是看“能不能滑”而是看三件事手指滑动后会不会稳稳停到下一页页内文案会不会一眼扫完内容在窄屏上会不会被裁掉.page h1, .page h2 { margin: 0 0 12px; line-height: 1.2; } .page p { font-size: 16px; line-height: 1.8; max-width: 28rem; } media (max-width: 480px) { .page { padding: 20px 16px 72px; } .pager { right: 16px; bottom: 16px; } }如果页面里有图只用公开样图或授权脱敏素材别把真实客户资料、订单、支付页、库存数据、手机号、Token 或私有链接塞进去。五、窄屏裁切检查要真机做桌面缩放不等于手机。检查顺序是先在电脑上用窄窗口看一遍确认标题、正文、图片都不溢出。再拿手机本地打开左右滑几次检查停靠是否准确。切换横竖屏确认页宽重新铺满。快速点左右键或轻划几下看页码是否同步更新。如果每页内容都能在一屏内读完且滑动后能自然停住这个原型就能拿去验收。六、本机服务只绑定 127.0.0.1这个场景不需要复杂部署直接起一个本机静态服务就行。关键点只有一个只监听本机。cd /path/to/preview python3 -m http.server 8080 --bind 127.0.0.1浏览器里访问http://127.0.0.1:8080桌面端先跑通再看手机端。这样边界清楚不会把原型暴露到局域网里。如果你习惯把原型放进独立目录只留这几类文件index.htmlstyle.cssapp.js少量公开样图别把本机目录、配置文件、凭据文件一起放进去也不要接后台接口。七、用 cpolar 做短时验收本地验收没问题后再用 cpolar 暂时开一条外部访问通道把链接发给同事、客户或家人。流程很简单本地静态服务先启动。打开 cpolar给127.0.0.1:8080建一个临时公网入口。把短链接发出去让对方只看这一个只读页面。让对方重点反馈三件事顺序对不对、停靠稳不稳、阅读节奏顺不顺。这个方式特别适合异地验收因为对方不用装任何东西只要打开浏览器就能左右滑也能更快知道切分是否合理。八、一个可直接复用的内容骨架如果你准备拿去做活动分镜或版本说明可以直接按下面的骨架填内容封面一句话标题 一句补充说明第 2 页3 个亮点第 3 页使用场景或适用对象第 4 页注意事项或结尾说明写文案时记住两条每页标题尽量短最好一眼看懂每页正文尽量少保证手机上不用反复缩放这样做出来的页面比 PDF 更适合移动端也比长截图更适合验收。九、临时开放后的收尾清单短时验收结束后收尾要干净。关闭 cpolar 临时通道停止本机静态服务撤回临时链接清理临时页面或保留本地自用边界删除测试目录里的临时素材和截屏文件这一步别省。只读原型的价值在于“方便看”不是“长期开着”。把窗口关好后面再改文案、换图、调节奏都能在本地迭代。如果你手里正好有一份长 PDF不妨先别急着导出。先拆成几屏做成一个原生横向分页页再让同事在手机上滑一遍。页面是否好读滑三下就知道了。