如何滚动固定高度容器内的内容？

Posted 2023-03-06

【中文标题】如何滚动固定高度容器内的内容？

【英文标题】：how to scroll the content inside of a fixed-height container?

【发布时间】：2012-04-08 05:43:09

【问题描述】：

我想知道如何使用 jQuery 实现下图中的简单示例。

基本上它是一个固定高度的容器 div，我希望它里面的内容（段落列表）可以通过箭头向上/向下滚动。

我需要箭头命令并且没有滚动条，并且我希望不使用任何插件（如果可能的话），例如 this old dhtml 示例。

考虑到我不知道整个内容的确切高度，因为它是 ajax 加载的，所以它可以是可变的。

任何帮助将不胜感激。

提前致谢。

【参考方案1】：

使用scrollto插件，它会让你的生活轻松100万倍

http://demos.flesler.com/jquery/scrollTo/

允许您在带有溢出集的 div 内滚动

【参考方案2】：

您可能正在寻找scrollTo Plugin。但是，如果你想引入原生 HTML 滚动条，那么定义一个溢出属性就可以了。

div  overflow-y: scroll 

更新

---

我做了一个非常简单的demo，说明如何使用简单的 jQuery 创建滚动条。

另一个demo，带有滚动限制。完美的被称为制作中的插件。

更新 2

您正在寻找的是单击并按住事件，该事件不可用，但我们可以使用mousedown 事件来构建解决方法。

检查更新的demo

_{基本上，这个想法是在 mousedown 时开始一个间隔并在 mouseup 时清除}

【讨论】：

谢谢@Starx，但如果不使用插件，这不可能吗？

我一直在寻找它来为我的答案提供“其他”，但你比我快:)

@bobighorus，好的，我将在 JQuery 上创建一个简单的演示

@Starx 非常感谢Starx，考虑到我之前不知道内容的高度，因为它可以是可变的。

感谢@Starx，它有效；但是有没有办法获得连续滚动保持按下箭头？

【参考方案3】：

overflow-y: visible; 应该这样做

【讨论】：

问题有变化，也许您想再次解决。

【参考方案4】：

使用 css 属性 overflow 是否有效？ 这会做你想做的，但它会显示滚动条（你只能用overflow-x或overflow-y激活一个）。

【讨论】：

是的，谢谢@haltabush，我刚刚考虑过这个解决方案，但我需要箭头命令并且没有滚动条。