HTML页面局部滚动代码实例-html教程-PHP中文网

标签已被现代浏览器弃用，无法精准控制滚动、暂停交互或响应式适配；实现局部垂直滚动需确保父容器有明确高度（如height: 200px），配合overflow-y: auto，避免使用scroll；自动轮播应采用css @keyframes + transform: translatey()双份内容无缝循环，并用js控制animation-play-state暂停。

html页面局部滚动代码实例

<marquee></marquee> 已被现代浏览器弃用，且无法精准控制滚动区域、暂停交互或适配响应式场景。真要实现「局部滚动」，得用标准 CSS + JavaScript 方案。

让某个 div 区域独立垂直滚动

这是最常见需求：比如侧边菜单、日志面板、聊天记录区——内容超出容器时只在内部滚动，不影响页面其他部分。

关键不是加 overflow 就完事，得确保父容器有明确高度（height 或 max-height），否则 overflow-y: auto 不生效
避免用 overflow: scroll，它会强制显示滚动条（即使内容没溢出）；auto 更合理
若需隐藏原生滚动条但保留滚动能力，可用 ::-webkit-scrollbar 隐藏（仅限 WebKit 内核），Firefox 需用 scrollbar-width: none

示例：

<div style="height: 200px; overflow-y: auto; border: 1px solid #ccc;">
  <p>第1条消息</p>
  <p>第2条消息</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
														src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
													<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <p>第3条消息</p>
  <!-- 更多内容... -->
</div>

用 JavaScript 控制滚动位置（如回到顶部/跳转到某项）

纯 CSS 滚动是被动的，用户拖拽才动；而 scrollTop 和 scrollIntoView 才能主动干预。

element.scrollTop = 0 可立即置顶，但生硬；加 { behavior: 'smooth' } 可启用平滑滚动（注意 IE 不支持）
targetElement.scrollIntoView({ block: 'start', behavior: 'smooth' }) 更灵活，适合列表中高亮某一条
监听滚动事件别直接写 onscroll，优先用 addEventListener('scroll', handler)，便于后续 removeEventListener
频繁触发的滚动事件建议节流，否则影响性能；简单场景可用 requestAnimationFrame 包一层

实现无缝自动轮播式滚动（非 marquee）

大屏展示、数据看板常需要内容自动上滚，且不能闪、不能断、鼠标悬停可暂停——<marquee></marquee> 完全做不到这点。

核心思路是：渲染两份相同内容，用 @keyframes 把整体 translateY 从 0 动画到 -50%，循环播放
必须给容器设 overflow: hidden，否则复制内容会撑开容器
动画时长要和单条内容高度匹配，否则速度失真；例如每条高 40px，双份总高 80px，则 animation-duration: 4s ≈ 每秒滚 20px
暂停靠 JS 切换 animation-play-state: paused，别试图改 animation-duration，那会导致跳帧