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

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

你可以用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;
}

Answer 2

我将 "scroller" 称为滚动条中的可拖动元素。

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

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

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

为了达到你想要的效果，我相信你需要一个考虑到滚动 speed/acceleration 的插件。

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

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

autoDraggerLength: boolean

启用或禁用自动调整滚动条拖动器长度滚动量（与浏览器的本机滚动条相同的行为）。设置 autoDraggerLength: false 当你想要你的滚动条（总是）有固定尺寸。

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

How can I keep my scroll bar size(length) as stable?

html

javascript

css

jquery