Блог

Я задавал этот вопрос на официальном форуме jQuery Tools на прошлой неделе, но он определенно не так активен, как stackoverflow, поэтому подумал, что спрошу и здесь.

На страницах сведений о нашем проекте мы динамически загружаем контент, в котором для навигации используется вертикальный скроллер. Проблема в том, что высота вертикального скроллера всегда кажется на один элемент слишком высокой. Я не могу найти никакого способа повлиять на это программно.

Если я установлю для него значение circular равным true, кажется, что он имеет правильную высоту, но мы не хотим, чтобы он был непрерывным / круговым.

Пример здесь: http://www.centerline.net/projects/detail/?p=21

Здесь находится Unminified JS:http://www.centerline.net/lib/js/site-unmin.js

Есть идеи?

Вот представление о том, как это должно выглядеть при прокрутке до последнего элемента (стрелка вниз исчезает и не допускает пустую область под последним эскизом.

Решение, приведенное выше, выглядело так, как будто оно сработало бы, но также нашло решение здесь:

http://www.jasoncarr.com/technology/jquery-tools-scrollable-stop-scrolling-past-the-end

Фактический код для моего сайта был таким:

 $(function() {
  // Initialize the Scrollable control
  $(".scroll").scrollable({vertical:true, mousewheel:true, keyboard:true });

  // Get the Scrollable control
  var scrollable = jQuery(".scroll").data("scrollable");

  // Set to the number of visible items
  var size = 2;
  // Handle the Scrollable control's onSeek event
  scrollable.onSeek(function(event, index) {

    // Check to see if we're at the end
    if (this.getIndex() >= this.getSize() - size) {

      // Disable the Next link
      jQuery("a.next").addClass("disabled");
    }
  });

  // Handle the Scrollable control's onBeforeSeek event
  scrollable.onBeforeSeek(function(event, index) {

    // Check to see if we're at the end
    if (this.getIndex() >= this.getSize() - size) {

      // Check to see if we're trying to move forward
      if (index > this.getIndex()) {
        // Cancel navigation
        return false;
      }
    }
  });

});
  

К сожалению, количество разделов в контейнере .items должно быть кратно количеству элементов, которые вы хотите отображать одновременно. Итак, у вас есть 3 раздела, но вы показываете по 2 элемента одновременно. Вот почему плагин с возможностью прокрутки работает со сбоями. Вы можете либо открыть неминифицированный исходный код и немного изменить его, что не должно быть очень сложно.

Или гораздо более простым решением было бы либо добавить новый div и сделать его 4 к 2.

Или уменьшите количество элементов, которые вы показываете одновременно, до 1 и увеличьте высоту ваших разделов.

Использование другого плагина тоже может сработать.

Надеюсь, это поможет

Проблема в том, что jQuery tools прокручивает все изображения. И после последних изображений просто остается пустое пространство.

Попробуйте добавить это в прокручиваемый конструктор

 $('.scroll').scrollable({
   onBeforeSeek: function(e, index) {
        if (index == $('.items').size()) {
            return false;
        }
    },
    onSeek: function(e, index) {
        if (index == $('.items').size()-1) {
            $('.next').hide(0);
        } else {
            if ($('.next').is(':hidden')) {
                $('.next').show();
            }
        }
    }
});
  

или

 api = $('.scroll').scrollable({
   //your setup code
});

api.onBeforeSeek: function(e, index) {
        if (index == this.getSize()) {
            return false;
        }
    }
 api.onSeek: function(e, index) {
        if (index == this.getSize()-1) {
            $('.next').hide(0);
        } else {
            if ($('.next').is(':hidden')) {
                $('.next').show();
            }
        }
    }
  

Отказ от ответственности: я не эксперт. Я не тестировал это. Ваш код сокращен, его невозможно четко разглядеть. Я почти не использую инструменты jQuery. Но я думаю, что это был бы правильный путь.