Question

我有一个场景，有一个div父元素。它的css值为overflow:auto。当用户继续添加多个元素时，overflow有效，但滚动条的大小变小。（这很常见！）

我看的是，我不想让我的scroll栏高度变小或变大。无论附加元素的长度如何，我都希望保持scrollbar高度变为静态。

所以我尝试hide和show父级下的嵌套元素。而不是调整滚动条的大小我重新调整内容的大小。

我对此并不太了解。但几乎我试图得到我看的那个。

但没有得到结果。

这是我的代码：

var $newdiv = $('.div');
    $col = $('<div />');

var container = $('#content');
var n = 0;
var child = $('.show');
var parent =  container;

var add = function () {
    for(var i=1; i<=10; i++){
         $newdiv.clone().removeClass('div').addClass('show')
         .find('span').append(n = n < 9 ? '0'+(++n) : ++n).end().clone().appendTo($col);
    }

}

$col.appendTo(container);
$('button').click(function () { add()});
$(container).slimScroll({});

container.scroll(function(){
   totalCH = 20*n;
    parentH = parent.outerHeight();
    required = Math.abs(parentH - totalCH);
    scrolled = $(this).scrollTop();
    requireToHide = scrolled/20;
    hidableNo = Math.round(requireToHide);

    if(scrolled > lastScrollTop) {
        //while scroll down
        //$(".div:lt("+hidableNo+ ")" ).addClass('hideIt');
        //$(".div:gt("+(n-1)+ ")" ).addClass( "showIt");
    } else {
        //while scroll up
        //$(".div:lt("+(n-1)+ ")" ).addClass("showIt");
        //$(".div:gt("+hidableNo+ ")" ).addClass("hideIt");
    }

    lastScrollTop = scrolled;


});


var lastScrollTop = 0;

Try Online

任何人都建议我采用正确的方法。

提前致谢！

请避免插件并考虑支持ie9

Answer 1

我将参考＆＃34;卷轴＆＃34;作为滚动条中的可拖动元素。

滚动条更改大小是标准UI表示形式，可让用户了解滚动区域中的内容量;其目标也是将内容滚动率保持在标准流量。

例如，如果可滚动区域中有大量内容，则拖动较小的滚动条意味着内容将以（大约）与可滚动内容较少（以及较大的滚动条）相同的速度流动。 / p>

具有恒定大小的滚动条意味着大量内容需要比较少量的内容滚动得快。

为了达到你想要的效果，我相信你需要一个能够考虑滚动速度/加速度的插件。

我使用：jquery.mCustomscroll bar来进行自定义滚动行为。 http://manos.malihu.gr/jquery-custom-content-scroller/

它甚至可以设置完全符合您的要求：

autoDraggerLength: boolean

启用或禁用相关的自动调整滚动条拖动器长度滚动量（与浏览器的本机滚动条相同）。设置autoDraggerLength：false当你想要滚动条（总是）有一个固定的大小。

Answer 2

你可以用css解决

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border: 1px solid black;
    background: rgb(41,41,41);
    border-radius: 10px;}

::-webkit-scrollbar-thumb{
    border-radius:10px;
    width: 8px;
    height: 150px;
    border: 1px solid black;
    background: white;
}

如何保持滚动条的大小（长度）稳定？

2 个答案: