在容器中使用YUI蒙皮滾動條

Question

如何在YUI容器中實現自定義滾動條？

Answer 1

使用YUI3，您可以更改內部框架的滾動條。如果你想讓實際的瀏覽器的外部滾動條 - 只是放棄這個想法。這是不值得頭痛的。太多的瀏覽器根本不會讓你。

這裏是例如一個內部設置的麪皮在YUI 3.4

CSS：

<style type="text/css" media="screen"> 
    #video-playlist-scroll-bar-container{text-align:right} 
    #video-playlist-scroll-bar{position:relative;width:14px;border:1px solid #e0e0e0;height:379px;margin:0 auto} 
    #drag-handle-container-wrap{position:relative;top:17px;bottom:17px;left:0;width:14px;height:345px} 
    #drag-handle-container-wrap .yui3-slider-content{position:absolute;top:0;left:0} 
    #drag-handle-draggable{position:absolute;left:0;background-color:#eaeaea;text-align:center;cursor:move;width:14px} 
    #drag-handle-up,#drag-handle-down{position:absolute;display:block;width:14px;height:16px;cursor:pointer} 
    #drag-handle-up{top:0;left:0} 
    #drag-handle-down{bottom:0;left:0} 
</style> 

HTML：

<div class="yui3-u-1-12" id="video-playlist-scroll-bar-container"> 
    <div id="video-playlist-scroll-bar"> 
    <div id="drag-handle-up"><img src="/assets/images/rebrand/drag-arrow-top.gif"></div> 
    <div id="drag-handle-container-wrap"> 
    <span class="yui3-widget yui3-sliderbase yui3-slider" style=""><span class="yui3-slider-content yui3-slider-y"><div id="drag-handle-container" style="height: 345px; "> 
     <div id="drag-handle-draggable" class="yui3-dd-draggable" style="top: 0px; left: 0px; "> 
      <img src="/assets/images/rebrand/drag-handle.gif" width="9" height="100"> 
     </div></div></span></span></div> 
    <div id="drag-handle-down"><img src="/assets/images/rebrand/drag-arrow-bottom.gif"></div> 
    </div> 
</div> 

YUI：

YUI().use("base","node",'slider',function(Y){ 
    var CLICK = "click", 
     ID = "#", 
     _scrollingBuffer = 75, 
     _maxScrollRegion = 0; 

    // Slider 
    var _tmp = Y.one(ID+'playlist-container'+" .video-playlist-item"), 
     _nodeBuffer = Y.one(ID+'playlist-container').get('children').slice(-5), 
     _bufferFunction = function() { 
     var _height = 0; 
     _nodeBuffer.each(function(i) { 
      _height = _height + i.get('region').height; 
     }); 
     return _height; 
     }, 
     _buffer = _bufferFunction(), 
     _maxScrollRegion = Y.one(ID+'playlist-container').get("region").height - _buffer; 

    var listScroll = new Y.Slider({ 
     axis : 'y', 
     min : 0, // reverse min and max to make the top 
     max : _maxScrollRegion, 
     value : 0, 
     length: '345px' 
    }); 
    listScroll.renderRail = function() { 
     return Y.one("#drag-handle-container"); 
    }; 
    listScroll.renderThumb = function() { 
     return this.rail.one("#drag-handle-draggable"); 
    }; 

    listScroll.render("#drag-handle-container-wrap"); 

    listScroll.on('valueChange', Y.bind(function (e) { 
    //scroll something? 
    })); 

    Y.one("#drag-handle-up").on(CLICK, Y.bind(function (e) { 
    e.preventDefault(); 
    if (listScroll.get('value') >= _scrollingBuffer) { 
     listScroll.setValue(listScroll.get('value') - _scrollingBuffer); 
    } else { 
     listScroll.setValue(0); 
    } 
    })); 
    Y.one("#drag-handle-down").on(CLICK, Y.bind(function (e) { 
    e.preventDefault(); 
    if (listScroll.get('value') <= Math.round(_maxScrollRegion - _scrollingBuffer)) { 
     listScroll.setValue(listScroll.get('value') + _scrollingBuffer); 
     } else { 
     listScroll.setValue(_maxScrollRegion); 
    } 
    })); 
}); 

注意，這是幾乎是一個副本/ pas來自我的一個項目 - 快速刪除任何標識符。它可能不工作作爲複製/粘貼..但你會得到jist。

終產物：

您可以通過不使用走得更遠「溢出：汽車;」 CSS並使用YUI 3 ScrollView。我自己使用YUI上的分頁版本。很容易做到&百分比下降&百分比。

希望這是你要找的，而不是瀏覽器的滾動條。