页面滚动时自动隐藏广告需监听scroll事件并动态控制广告容器可见性，推荐用requestAnimationFrame节流、缓存scrollY、opacity+pointer-events切换、fixed定位、方向阈值判断及iOS兼容处理。
页面滚动时自动隐藏广告，本质是监听滚动行为 + 动态控制广告容器的可见性，不是靠滚动条显隐逻辑。直接用 overflow 或 ::-webkit-scrollbar 一类样式完全无效——那些只管滚动条本身，和广告元素无关。
监听 scroll 事件时如何避免频繁触发导致卡顿
滚动事件在移动端和桌面端都可能高频触发（每秒几十次），直接在 scroll 回调里操作 DOM（比如 element.style.display = 'none'）会引发重排，明显卡顿。
- 必须使用节流（throttle）或防抖（debounce）：推荐用
requestAnimationFrame包一层，确保只在下一帧执行一次判断 - 不要在
scroll中读取scrollTop多次：缓存一次值，后续逻辑复用 - 避免操作
display或visibility：改用opacity: 0+pointer-events: none，配合transition更平滑
广告容器的定位与层级必须脱离文档流
如果广告是普通 <div> 嵌在正文流里，滚动时隐藏它会导致页面内容“上跳”，用户体验极差。必须用 <code>position: fixed 或 position: sticky 锚定位置。
-
fixed最稳妥：广告始终相对于视口定位，滚动不影响布局流 - 慎用
sticky：它依赖父容器高度和top值，在复杂嵌套或动态内容下容易失效 - 务必设置
z-index：确保广告不被其他fixed元素（如导航栏）遮挡 - 如果广告含 iframe（如第三方广告代码），需确认其内部是否强制重置
body样式，可能干扰外部控制
滚动方向判断要区分“向下”和“向上”
用户向上滚动时，往往是要回看之前内容，此时隐藏广告反而打断阅读。合理策略是：仅在向下滚动超过阈值后隐藏，向上滚动时立即恢复显示。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 记录上一次
scrollY，与当前值比较差值符号 - 设一个最小位移阈值（如
10px），防止手指微滑误判 - 可加延时恢复：向上滚动后等待
150ms再显示，避免抖动 - 示例逻辑片段：
let lastScrollY = 0;<br>let ticking = false;<br>function updateAdVisibility() {<br> const currentY = window.scrollY;<br> const direction = currentY > lastScrollY ? 'down' : 'up';<br> if (direction === 'down' && currentY > 200) {<br> adElement.style.opacity = '0';<br> adElement.style.pointerEvents = 'none';<br> } else if (direction === 'up') {<br> adElement.style.opacity = '1';<br> adElement.style.pointerEvents = 'auto';<br> }<br> lastScrollY = currentY;<br>}
移动端 Safari 的 scroll 事件兼容性陷阱
iOS Safari（尤其 iOS 15+）对 scroll 事件有特殊优化：默认异步延迟派发，且 scrollY 在事件回调中可能不是最新值，导致方向判断失准。
- 必须在
上添加touch-action: manipulation，减少事件延迟 - 避免依赖
window.scrollY：改用event.target.scrollTop（如果监听的是容器而非window） - 真机测试不可跳过：模拟器无法复现部分 touch-scroll 行为
- 备选方案：用
IntersectionObserver监听广告是否进入/离开视口，但无法精确响应滚动方向
真正难的不是“怎么写代码”，而是滚动方向检测的鲁棒性、移动端事件延迟的应对、以及广告恢复时机的肉眼舒适度——这三者稍有偏差，用户就会觉得“卡”“闪”“跟不上手速”。
