带有 JqueryTools RangeInput 的垂直自定义滚动条

Question

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

这里是示例页面：http://conceptionkit.co.uk/ck/support

页面有多个可滚动的 div，其 html 结构如下：

<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”的变量实例。也许他们有冲突？

这是我尝试在页面上的所有滚动包装实例上放置滚动条的脚本。由于我必须将每个范围输入关联到正确的窗格，因此它遍历 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 变量来测量幻灯片的高度，以便正确缩放滚动条。如果内容尚未完全加载，或者如果 javascript 填充幻灯片容器，例如使用可变高度的手风琴，则此方法似乎计算错误高度。它需要排队才能最后运行。

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

如果大小发生变化以重新计算高度，然后相应地更新滚动条，也可以将函数附加到 div。

我会在完成改进后发布改进。