javascript - 如何使滚动条的大小(长度)保持稳定？

Question

我这里有个场景，有一个div父元素。它的 css 值为 overflow:auto。当用户继续添加多个元素时，overflow 有效，但滚动条的尺寸变小了。 (这很常见!)

我在看的是，我不想让我的滚动条高度变小或变大。我想让我的 scrollbar 高度保持不变，无论附加元素的长度如何。

所以我试图隐藏和显示父元素下的嵌套元素。我没有调整滚动条的大小，而是调整了内容的大小。

我对这个不太了解。但几乎我试图得到我看起来的那个。

却得不到结果。

这是我的代码:

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

我将“滚动条”称为滚动条中的可拖动元素。

滚动条改变大小是一种标准的 UI 表示，让用户了解滚动区域中的内容量；其目标也是将内容的滚动速率保持在标准流率。

例如，如果可滚动区域中有大量内容，则拖动较小的滚动条意味着内容的流动速度(大约)与可滚动内容较少(和较大的滚动条)相同。

拥有一个固定大小的滚动条，意味着大量的内容需要比少量的内容滚动得更快。

为了实现您想要的效果，我相信您需要一个考虑滚动速度/加速度的插件。

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

它甚至有一个设置可以完全按照您的意愿行事:

autoDraggerLength: boolean

• 启用或禁用自动调整滚动条拖动器长度滚动量(与浏览器的 native 滚动条相同的行为)。设置 autoDraggerLength: false 当你想要你的滚动条(总是)具有固定大小。