Question

我必须在固定的div中显示一些数据。它通常会显示1列中的所有数据，但我需要将其滑出，以便我可以在多列中显示数据（只是彼此相邻堆叠显示为内联块）。

使用普通滚动条一切都很棒（fiddle）。

但是当我设置一个新的滚动条时，我无法更改内容宽度，我尝试在更改滚动条的宽度时更改“.jspContainer”的宽度。我也尝试过使用api，但我无法按预期工作（不确定我是否掌握了函数的内部结构）

有没有办法在JScrollpane中解决我的问题，还是有另外一个可以帮助我的插件？

HTML

<body>
<button id="animate">Animate</button>
<button id="reinit">reinit with new width</button>
<button id="destroy">Remove JScrollpane</button>
<div id="scroller">
    <div id="a1" class="content">hello</div>
    <div id="a2" class="content">hello</div>
    <div id="a3" class="content">hello</div>
    <div id="a4" class="content">hello</div>
    <div id="a5" class="content">hello</div>
    <div id="a6" class="content">hello</div>
    <div id="a7" class="content">hello</div>
    <div id="a8" class="content">hello</div>
    <div id="a9" class="content">hello</div>
    <div id="a10" class="content">hello</div>
    <div id="a11" class="content">hello</div>
    <div id="a12" class="content">hello</div>
    <div id="a13" class="content">hello</div>
    <div id="a14" class="content">hello</div>
    <div id="a15" class="content">hello</div>
    <div id="a16" class="content">hello</div>
</div>
</body>

Jquery的

var scroller = $("#scroller").jScrollPane().data('jsp');
$(document).ready(function () {
$("#destroy").click(function () {
    scroller.destroy();
});
});

$(document).ready(function () {
$("#reinit").click(function () {
    scroller.reinitialise(contentWidth=450);
});
});

$(document).ready(function () {
$("#scroller").jScrollPane();
});


var windowsize = $(window).width();
$(document).ready(function () {
windowsize = (windowsize - 200) / 225;
i = Math.floor(windowsize);
flwidth = "200"
switch (i) {
    case 0:
        flwidth = "225";
        break;
    case 1:
        flwidth = "450";
        break;
    case 2:
        flwidth = "450";
        break;
    case 3:
        flwidth = "647";
        break;
    case 4:
        flwidth = "647";
        break;
        /* and so on */
};
$("#animate").click(function () {
    $("#scroller").animate({
        width: flwidth
    }, 400);
});

CSS：

#scroller {
right:50px;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
height:600px;
/* in reality height is 100% */
background:rgba(0, 0, 0, 0.2);
width:225px;
}

#destroy
{
float:right;
margin-right:50px;
}

.content {
height:75px;
padding:1px;
padding-left:6px;
width:200px;
cursor:pointer;
display:inline-block;
background:rgba(102, 139, 195, 0.2);
}
#a1, #a3, #a5, #a7, #a9, #a11, #a13, #a15 {
background:rgba(102, 139, 195, 0.5);
}

Answer 1

Example使用jQuery Scrollbar。

此示例基于您的第二个jsFiddle与本机滚动条。它使用CSS中提到的100％高度。调整输出窗口大小以查看滚动条行为。为了简化示例，我使用了position:absolute。要使用position:fixed，请将可滚动容器包装到另一个具有固定位置的div中。此外，我已经将CSS样式应用于ID，而不是应用于类 - 滚动条插件需要将父CSS应用于滚动条包装器。

使用自定义jquery滚动条调整为动态内容宽度

1 个答案: