Javascript 容器中使用的YUI蒙皮滚动条

如何在YUI容器中实现自定义外观的滚动条？

使用YUI 3，可以更改内部框架的滚动条。如果你在实际浏览器的外部滚动条上点击了按钮，那就放弃这个想法吧。这不值得头痛。太多的浏览器根本不允许你

下面是YUI 3.4中的内部设置示例

CSS:

#视频播放列表滚动条容器{文本对齐：右}
#视频播放列表滚动条{位置：相对；宽度：14px；边框：1px实心#e0e0；高度：379px；边距：0自动}
#拖动手柄容器包装{位置：相对；顶部：17px；底部：17px；左侧：0；宽度：14px；高度：345px}
#拖动句柄容器包装.yui3滑块内容{位置：绝对；顶部：0；左侧：0}
#拖动手柄可拖动{位置：绝对；左侧：0；背景色：#eaeaea；文本对齐：中心；光标：移动；宽度：14px}
#向上拖动控制柄，#向下拖动控制柄{位置：绝对；显示：块；宽度：14px；高度：16px；光标：指针}
#向上拖动控制柄{顶部：0；左侧：0}
#向下拖动手柄{底部：0；左侧：0}

HTML:

尤伊：

YUI（）。使用（“基”、“节点”、“滑块”和函数（Y）{
var CLICK=“CLICK”，
ID=“#”，
_scrollingBuffer=75，
_maxScrollRegion=0；
//滑块
var_tmp=Y.one（ID+'playlist-container'+“.video playlist项”），
_nodeBuffer=Y.one（ID+'playlist-container'）.get（'children'）.slice（-5），
_bufferFunction=函数（）{
var _高度=0；
_nodeBuffer.each（函数（i）{
_高度=_高度+i.get（'region'）。高度；
});
返回高度；
},
_buffer=\u bufferFunction（），
_maxScrollRegion=Y.one（ID+'playlist-container'）。获取（“区域”）。高度-\u缓冲区；
var listcroll=新的Y滑块({
轴：‘y’，
最小值：0，//反转最小值和最大值，使顶部
max:_maxscroll区域，
值：0，
长度：345px
});
listScroll.renderRail=函数（）{
返回Y.one（“拖动手柄容器”）；
};
listScroll.renderThumb=函数（）{
返回这个.rail.one（“#拖动手柄拖动”）；
};
render（“拖动句柄容器包装”）；
listcroll.on（'valueChange'，Y.bind）（函数（e）{
//滚动什么？
}));
Y.one（“#向上拖动手柄”）。on（单击，Y.bind（函数（e）{
e、 预防默认值（）；
if（listcroll.get（'value'）>=\u scrollingBuffer）{
setValue（listcroll.get（'value'）-\u scrollingBuffer）；
}否则{
listScroll.setValue（0）；
}
}));
Y.one（“#向下拖动手柄”）。on（单击，Y.bind（函数（e）{
e、 预防默认值（）；
如果（listcroll.get（'value'）使用YUI3，您可以更改内部框架的滚动条。如果您更改实际浏览器的外部滚动条，请放弃这个想法。这不值得任何头痛。太多浏览器根本不允许您这样做

下面是YUI 3.4中的内部设置示例

CSS:


#视频播放列表滚动条容器{文本对齐：右}
#视频播放列表滚动条{位置：相对；宽度：14px；边框：1px实心#e0e0；高度：379px；边距：0自动}
#拖动手柄容器包装{位置：相对；顶部：17px；底部：17px；左侧：0；宽度：14px；高度：345px}
#拖动句柄容器包装.yui3滑块内容{位置：绝对；顶部：0；左侧：0}
#拖动手柄可拖动{位置：绝对；左侧：0；背景色：#eaeaea；文本对齐：中心；光标：移动；宽度：14px}
#向上拖动控制柄，#向下拖动控制柄{位置：绝对；显示：块；宽度：14px；高度：16px；光标：指针}
#向上拖动控制柄{顶部：0；左侧：0}
#向下拖动手柄{底部：0；左侧：0}

HTML:



尤伊：

YUI（）。使用（“基”、“节点”、“滑块”和函数（Y）{
var CLICK=“CLICK”，
ID=“#”，
_scrollingBuffer=75，
_maxScrollRegion=0；
//滑块
var_tmp=Y.one（ID+'playlist-container'+“.video playlist项”），
_nodeBuffer=Y.one（ID+'playlist-container'）.get（'children'）.slice（-5），
_bufferFunction=函数（）{
var _高度=0；
_nodeBuffer.each（函数（i）{
_高度=_高度+i.get（'region'）。高度；
});
返回高度；
},
_buffer=\u bufferFunction（），
_maxScrollRegion=Y.one（ID+'playlist-container'）。获取（“区域”）。高度-\u缓冲区；
var listcroll=新的Y滑块({
轴：‘y’，
最小值：0，//反转最小值和最大值，使顶部
max:_maxscroll区域，
值：0，
长度：345px
});
listScroll.renderRail=函数（）{
返回Y.one（“拖动手柄容器”）；
};
listScroll.renderThumb=函数（）{
返回这个.rail.one（“#拖动手柄拖动”）；
};
render（“拖动句柄容器包装”）；
listcroll.on（'valueChange'，Y.bind）（函数（e）{
//滚动什么？
}));
Y.one（“#向上拖动手柄”）。on（单击，Y.bind（函数（e）{
e、 预防默认值（）；
if（listcroll.get（'value'）>=\u scrollingBuffer）{
setValue（listcroll.get（'value'）-\u scrollingBuffer）；
}否则{
listScroll.setValue（0）；
}
}));
Y.one（“#向下拖动手柄”）。on（单击，Y.bind（函数（e）{
e、 预防默认值（）；
简而言之，如果（listcroll.get（'value'），则不能在跨浏览器（或跨平台）中执行此操作顺便问一下，这是一个问题吗？可能至少对那些我能做到的浏览器来说是这样的？你为什么要这样做将是我的下一个问题…停下来想想，也许大多数浏览器不允许这样做是有原因的。就我个人而言，我会在你的网站打开的那一刻就离开，你不应该试图改变浏览器的基本功能。下一步是什么，Styleing我的地址栏？：）简言之，你不能用跨浏览器（或跨平台）的方式来做这件事，这是一个问题吗？可能至少对那些我可以做的浏览器来说是这样的？你为什么要做这将是我的下一个问题…停下来想想，也许t
<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>

<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().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);
    }
  }));
});