Вертикальные пользовательские полосы прокрутки с помощью JqueryTools RangeInput - PullRequest
Новая
       11

Вертикальные пользовательские полосы прокрутки с помощью JqueryTools RangeInput

2 голосов
/ 21 января 2012

Я пытаюсь заменить собственную полосу прокрутки браузера, используя функцию rangeinput JqueryTools.

Вот пример страницы: 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
});

Однако, когда я пытаюсь обобщить скрипт,это не работаетЯ думаю, что проблема заключается в наличии нескольких экземпляров переменной с именем "прокрутка".Может быть, они конфликтуют?

Вот моя попытка сценария разместить полосы прокрутки во всех экземплярах прокрутки на странице.Так как я должен сопоставить каждый диапазон ввода с правильной панелью, он перебирает 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.

Что я здесь не так делаю?

1 Ответ

3 голосов
/ 24 января 2012

Код javascript выше действительно работал, проблема была в css.Вот необходимые CSS, чтобы заставить его работать.Примечание: этот css устанавливает дивизии .scroll для использования полосы прокрутки браузера по умолчанию.Если 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. Div .scrollwrap должен иметьустановите высоту, а переполнение скрыто, и оно должно иметь положение (относительное или абсолютное).Это окно, через которое вы вглядываетесь, чтобы увидеть прокручиваемый div за ним.

  2. .scroll div должен иметь положение (относительное или абсолютное), и изначально вы устанавливаете его какустановить высоту и переполнение: auto, чтобы он работал с отключенным javascript.

  3. Как только ваш скрипт загрузится, первое, что вы сделаете, это измените свойства на .scroll так, чтобы height: autoи переполнение: скрыто.Это заставит 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, если размер изменяется, чтобы пересчитать высоту, а затем соответствующим образом обновить полосу прокрутки.

Я опубликую улучшения по мере их разработки.

...