使JavaScript的自定义滚动条

我说“的JavaScript ”。我正在尝试制作自己的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/

来源

2013-02-27 Taufik Nurrohman

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

Here's your modified fiddle

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

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

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

来源

2013-04-05 14:53:37 matewka

心中已经已经尝试之前使用'scrollTop'，但它并没有隐藏溢出工作。不知道你如何做到这一点与隐藏溢出。但现在你已经解决了这个问题。谢谢。 – 2013-04-09 11:22:17

我想了解最简单的办法是准备用'溢出盒：scroll'并检查其行为。当你这样做的时候，你会注意到你得到了原生的滚动条。当您滚动内容时，它的'scrollTop'属性发生变化。我的jsfiddle解决方案完全相反 - 我们修改scrollTop属性来滚动内容。什么'overflow：hidden'呢，只是隐藏本地滚动条。 – matewka 2013-04-10 12:38:04

使JavaScript的自定义滚动条

回答

相关问题