容器中使用的 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 上使用分页版本。按页面和百分比进行上下移动很容易。

希望这是您要查找的内容，而不是浏览器的滚动条。