使用 JqueryTools RangeInput 垂直自定义滚动条

Question

我正在尝试使用 JqueryTools 的 rangeinput 函数替换浏览器的本机滚动条。

以下是示例页面： http://conceptionkit.co.uk/ck/support

该页面具有多个具有以下 html 结构的可滚动 div：

<div class="scrollwrap"><!-- scrollwrap doesn't move and has overflow:hidden -->

   <div class="scroll"><!- this is the scrollable pane --></div>

    <!-- this is the rangecontrol that is converted into a 
                            vertical scrollbar by the script -->
   <input class="hide" type="range" max="300" step="1" />

</div>

对于页面上的单个实例，以下代码有效：

var scroll = jQuery(".scroll");

// initialize rangeinput
jQuery(":range").rangeinput({

  // slide the DIV along with the range using jQuery css() method
  onSlide: function(ev, step)  { scroll.css({bottom: -step});},

  // display progressbar
  progress: true,

  // initial value. also sets the DIV initial scroll position
  value: 100,

  // this is called when the slider is clicked. we animate the DIV
  change: function(e, i) { scroll.animate({bottom: -i}, "fast");},

  // disable drag handle animation when when slider is clicked
  speed: 0
}); 

但是，当我尝试概括该脚本时，它不起作用。我认为问题在于名为“scroll”的变量的多个实例。也许他们是矛盾的？

这是我尝试编写一个脚本，将滚动条放在页面上的所有scrollwrap 实例上。由于我必须将每个范围输入关联到正确的窗格，因此它会迭代 jQuery(".scrollwrap").each() 并在每个窗格中找到滚动窗格和范围控件：

// default style for .scroll is overflow:auto for no-js browsers.
// must turn that off first
jQuery(".scroll").css('overflow','hidden');

jQuery(".scrollwrap").css('overflow','hidden').each(function(index){

    // Inject range control element
    jQuery(this).append('<input class="hide" type="range" max="300" step="1" />');

    var scroll = jQuery(".scroll",this);

    // initialize rangeinput
    jQuery(":range", this).rangeinput({

      // slide the DIV along with the range using jQuery css() method
      onSlide: function(ev, step)  { scroll.css({top: -step});},

      // display progressbar
      progress: true,

      // initial value. also sets the DIV initial scroll position
      value: 100,

      // this is called when the slider is clicked. we animate the DIV
      change: function(e, i) { scroll.animate({top: -i}, "fast");},

      // disable drag handle animation when when slider is clicked
      speed: 0
    });             

});

上面的脚本不会生成任何错误，它确实创建了滑块控件，但移动滑块不会移动相关的 .scroll div。

我在这里做错了什么？

Answer 1

上面的 javascript 代码实际上可以工作，问题出在 css 上。这是使其工作所需的 css。注意：此 css 将 .scroll div 设置为默认使用浏览器的滚动条。如果 js 已打开，那么我们将更改样式以使其正常工作。

    .scrollwrap, .panes > div.scrollwrap {
        position:relative;
        overflow:hidden;
        padding-right:50px;
        height:250px;
    }

    .scroll {
        height:250px;
        overflow:auto;
        position:relative;
        width:610px;
    }

/* height is now larger than width  */
.slider {
    background:#ccc; 
    cursor:pointer;
    border:none;
    margin-top:10px;
    border-radius:5px; 
    height:220px;
    width:9px;
    margin:0 0 0 60px;

    position:absolute;
    right:18px;
    top:10px;
}

    /* tweak drag handle position */
.handle {
    background:#09C; 
    height:28px;
    width:8px;
    position:absolute; 
    display:block; 
    margin-top:1px;
    cursor:move;
    border-radius:3px;
    box-shdow:2px 0px 2px rgba(0,0,0,0.5);

    top:0;
    left:1px;       
}

/* position progressbar on the bottom edge */
.progress {
        width:9px; 
        position:absolute;
        bottom:0;   
}

以下是重要元素：

1. .scrollwrap div 必须具有设定的高度、隐藏溢出，并且必须具有位置（相对或绝对）。这是您通过查看其后面的滚动 div 所看到的“窗口”。

2. .scroll div 必须有位置（相对或绝对），并且最初您将其设置为具有设定的高度和溢出：自动，以便它可以在关闭 javascript 的情况下工作。

3. 一旦你的脚本加载，你要做的第一件事就是更改 .scroll 的属性，以便 height:auto 和 Overflow:hidden。这将强制 div 达到其完整长度。

以下是适用于我的修改后的初始化脚本：

jQuery(".scrollwrap").each(function(index){

    var scroll = jQuery(".scroll",this);

    vheight = scroll.css({overflow:'hidden', height:'auto'}).height();

        // Inject range control element
        jQuery(this).append(
               '<input class="hide" type="range" max="' + vheight + '" step="' 
                  + (vheight/220) + '" />');

        // initialize rangeinput
        jQuery(":range", this).rangeinput({

          // slide the DIV along with the range using jQuery css() method
          onSlide: function(ev, step)  { scroll.css({top: step});},

          // display progressbar
          progress: true,

          // initial value. also sets the DIV initial scroll position
          value: 0,

          // this is called when the slider is clicked. we animate the DIV
          change: function(e, i) { scroll.animate({top: i}, "fast");},

          // disable drag handle animation when when slider is clicked
          speed: 0
        });             

});

注意：我在使用 vheight var 测量幻灯片的高度以正确缩放滚动条时仍然遇到问题。如果内容尚未完全加载，或者如果 javascript 填充了幻灯片容器，例如使用可变高度的手风琴，则此方法似乎会错误计算高度。它需要排队才能最后运行。

另外，我将 vheight 除以 220（滑块元素的高度），以获得步长。

如果尺寸发生变化，最好将一个函数附加到 div 以重新计算高度，然后相应地更新滚动条。

我会在解决问题后发布改进内容。