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

这是我尝试在脚本上将滚动条放在页面上的所有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;   
}

以下是重要内容：

.scrollwrap div必须具有设置高度，并且隐藏溢出，并且必须具有位置（相对或绝对）。这是您正在查看其背后的滚动div的“窗口”。
.scroll div必须具有位置（相对或绝对），并且最初将其设置为具有设置高度并且溢出：auto，因此它将在关闭javascript的情况下工作。
加载脚本后，首先要做的是更改.scroll上的属性，使高度：auto和overflow：hidden。这将迫使div完全使用。

以下是修订后的Initialize脚本，对我有用：

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也是一件好事。

我会在完成工作后发布改进措施。

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

1 个答案: