使JavaScript的自定义滚动条

Question

我说“的JavaScript ”。我正在尝试制作自己的JavaScript自定义滚动条。这几乎是成功的。问题是我无法获得滚动速度的精确乘数。这是我的代码：

var elem = document.getElementById('scroll-area'), 
    track = elem.children[1], 
    thumb = track.children[0], 
    height = parseInt(elem.offsetHeight, 10), 
    cntHeight = parseInt(elem.children[0].offsetHeight, 10), 
    trcHeight = parseInt(track.offsetHeight, 10), 
    distance = cntHeight - height, 
    mean = 50, // For multiplier (go faster or slower) 
    current = 0; 

elem.children[0].style.top = current + "px"; // Set default `top` value as `0` for initiation 
thumb.style.height = Math.round(trcHeight * height/cntHeight) + 'px'; // Set the scrollbar thumb hight 

var doScroll = function (e) { 

    // cross-browser wheel delta 
    e = window.event || e; 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    // (1 = scroll-up, -1 = scroll-down) 
    // Always check the scroll distance, make sure that the scroll distance value will not 
    // increased more than the content height and/or less than zero 
    if ((delta == -1 && current * mean >= -distance) || (delta == 1 && current * mean < 0)) { 
     current = current + delta; 
    } 

    // Move element up or down by updating the `top` value 
    elem.children[0].style.top = (current * mean) + 'px'; 
    thumb.style.top = 0 - Math.round(trcHeight * (current * mean)/cntHeight) + 'px'; 

    e.preventDefault(); 

}; 

if (elem.addEventListener) { 
    elem.addEventListener("mousewheel", doScroll, false); 
    elem.addEventListener("DOMMouseScroll", doScroll, false); 
} else { 
    elem.attachEvent("onmousewheel", doScroll); 
} 

而且标记：

<div id="scroll-area"> 
    <div><!-- CONTENT --></div> 
    <span class="scrollbar-track"><span class="scrollbar-thumb"></span></span> 
</div> 

我的问题是关于mean = 50。当您滚动容器，直到内容的底部，我在演示页面所做的红线应在容器内，不高于右下方停止。

任何人有准确结果的想法？

PS：我也想添加一个函数，让用户通过拖动滚动条来滚动内容。但我想我首先要关注这个问题。谢谢你的帮助。

DEMO：http://jsfiddle.net/tovic/2B8Ye/

Answer 1

你可以做这么多的要容易得多。 而不是计算容器的top属性，您可以设置它的scrollTop属性，并且您可以猜测 - 不必检查内容是否移动大于0或小于高度，因为scrollTop属性不能设置为值大于0小于容器的高度更小或更大！

Here's your modified fiddle

请注意，我只好换用另外<div id="everything">...</div>这样滚动条将不会被连同#scroll-area格滚动的一切。

另外我假设使用clientHeight而不是offsetHeight代替.scroll-content div来在cntHeight变量中包含填充。在scrollTop财产

更多信息，你可以在this文章找到。