带有滚动条的 jQuery 同位素答案

【问题标题】：jQuery isotope with scrollbar带有滚动条的 jQuery 同位素
【发布时间】：2012-06-13 22:11:56
【问题描述】：

我正在尝试在固定宽度的容器中实现 Isotope 插件，但无法显示滚动条。

我想要的是在同位素布局上强制滚动条（默认或一些花哨的），但它需要处于固定宽度和高度的环境中，溢出设置为隐藏在主体上。

我看到的所有使用 Isotope、Masonry 或 Wookmark 的示例都使用强制在正文或 html 上的滚动条，但就我而言，它需要设置为隐藏。

请，任何帮助表示赞赏。

【问题讨论】：

基本上我尝试在固定宽度的容器中实现同位素，但问题是我必须将溢出设置为隐藏在主体上。
我尝试添加溢出：自动、滚动、自定义滚动条，但这些都不会在 #container 上强制滚动条，它是同位素项目的持有者。
看看这个例子，它很好地重排-jsfiddle.net/desandro/P6JGY/6 但在我的情况下，当我调整大小时它会变得疯狂，因为我没有滚动条。

标签： jquery jquery-isotope

【解决方案1】：

我通过这种方式解决了类似的问题：

var $container = $(".container");
$container.isotope({
  itemSelector: '.item',
  itemPositionDataEnabled: true,
  layoutMode: 'masonry',
  masonry: { rowHeight: 107,columnWidth : 413 } }).css('overflow','auto');

【讨论】：

解决办法是 .css('overflow','auto');

【解决方案2】：

我假设您的滚动条没有显示，因为溢出被设置为隐藏内联，因此在 CSS 中具有更高的优先级。 jQuery 可以通过改变内联 css 来解决这个问题。

要使用纯 CSS 强制滚动条，请尝试使用 !important 关键字覆盖内联样式。

#container {
overflow:auto !important;
}

【讨论】：