容器中使用的 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);
    }
  }));
});

注意，这几乎是我的项目的复制/粘贴 - 快速删除了任何标识符。它可能无法作为复制/粘贴使用..但您会明白要点。

最终产品：

您可以通过不使用“overflow: auto;”走得更远CSS 并使用 YUI 3 ScrollView 。我自己在 YUI 上使用 Paged 版本。进行 up & 操作很容易。按页向下&百分比。

希望这就是您正在寻找的内容，而不是浏览器的滚动条。