3

我已经搜索了几个小时，发现了 0 个带有自定义滚动条/箭头的框的示例。我可以找到一些人谈论它是不可能的，最好的想法是不这样做。

除了这些建议之外，是否有跨浏览器兼容的解决方案？有谁知道目前使用自定义滚动条的任何网站，所以也许我可以查看该代码？

谢谢。

4

1 回答 1

0

通常，该元素会被一组精心设计的s 和and<select>即时替换，使其隐藏，并在您的 s 上添加一些事件委托，因此您可以在 hidden 中选择真正的选项。<div><ul><li><li><select>

例如，它看起来像这样：

 $(function(){
    $('select:visible').each(function(){
       var 
          $this = $(this), 
          $select = $('<div/>', {
            'css':{
              'display': 'inline-block',
              'position': 'relative'
            }
          }),
          $items, $ul,
          $display = $('<p/>');

       $this.hide();
       $items = $this.find('option').map(function(){ return '<li data-value="'+this.value+'">'+$(this).text()+'</li>'; }).get().join(''); // map the options from the select in an html string

       $ul = $('<ul/>', {
         'css':{
           'display':'none',
           'position':'absolute',
           'bottom': '0',
           'width': 'inherit'
         }
       });

       $ul.append($items); // append the items from the original select

       $select.append($display).append($ul); // create the "fake" select
       $this.before($select);

       $ul.on('click', 'li', function(e){
          $display.text($(e.target).text()); // set the text of your select
          $this.val($(e.target).data('value')); // set the value of the original select that is hidden
       });

       $select.click(function(){
         $ul.toggle(); // show/hide the items
       });
    });
 });

我现在创建了这段代码，但还没有测试过，但这就是想法。所有样式（CSS）都由您决定。只需确保为 LI 设置类，white-space: nowrap;以便它可以根据需要进行扩展。

现在有了所有这些自定义 HTML，您可以添加自己的箭头，对于滚动条，您可以使用现有的解决方案，如 jScrollpane 并附加到$ul包含您的项目的您的项目上，提醒您为其设置max-heightcss 样式以使其生效。

于 2012-12-03T20:17:46.640 回答