jScrollPane - вертикальная полоса прокрутки не «растет» с содержимым

Question

Я использую jScrollPane (отличный материал!) Для полос прокрутки на моем веб-сайте портфолио, но я столкнулся с проблемой, которую не могу решить сам.

Проблема высвечивается, когда я изменяю ширину и длину div с помощью jQuery.

У меня есть столбец (div # projects) с шириной 180px.Внутри этого div есть список ссылок.Когда пользователь нажимает на ссылку, div должен «расти» до ширины 480px.Также меняется содержание div.Список ссылок исчезнет, ​​и отобразится список проектов.Эта часть работает.Но jScrollPane не будет расти вместе с контентом, как я хочу.У меня есть две разные проблемы с этим.

Safari: В Safari вертикальная полоса прокрутки автоматически увеличивается с содержанием.Так что это прекрасно работает.Но когда ширина div увеличивается до 400px, внезапно появляется горизонтальная полоса прокрутки с шириной 180px (предыдущая ширина div).,

Firefox: Однако самая большая проблема в Firefox.Там вертикальная полоса прокрутки не будет автоматически расти вместе с содержимым.Я попытался использовать autoReinitialise, который прекрасно работает для вертикальной полосы прокрутки, чтобы расти вместе с контентом, но доставляет мне еще одну проблему.Когда я использую autoReinitialise, div, который только что вырос до 480px, снова возвращается к 180px.Так что автореинициализация не решает мою проблему.

В Firefox вы также можете видеть, что один div выглядит не так, как должен (если вы щелкнули ссылку и увидели проекты).Это примерно на высоте предыдущего контента (список со ссылками).

Это моя самая большая проблема.Но у меня также есть еще один маленький вопрос: можно ли всегда показывать полосы прокрутки ИЛИ давать уникальные классы каждой панели div.scroll?Потому что, когда я настраиваю ширину проектов div # на 480px, я также должен изменить ширину контейнера полосы прокрутки.Теперь я использую jQuery, чтобы дать каждому div уникальный класс.И если полосы прокрутки не всегда видны, количество делений не всегда одинаково.Так что теперь я всегда показываю полосы прокрутки, помещая другой div под контентом.Но если я могу дать каждому div панели прокрутки уникальный класс (вручную), мне не нужно всегда показывать полосы прокрутки.

Веб-сайт, на котором это все о: http://nieuw.yworks.nl. Частично div "projects".Нажмите на ссылку в этом разделе, и вы увидите проблемы.(Safari и частично Firefox).

Я надеюсь, что кто-то может помочь мне с этой проблемой.Я борюсь уже 2 дня.

Заранее спасибо (и надеюсь, что мой английский не так уж и плох:))

Редактировать: я использую Safari 5.4.1 и Firefox 9.0.1.Я не проверял это в Internet Explorer, это также вызовет гораздо больше проблем, я думаю.

---

Я думаю, что нашел проблему.Эти div (рис .: http://nieuw.yworks.nl/extern/divs.png) по-прежнему 180px вместо 480px. Единственное, я не знаю почему. Это код:

$ (". Item-30").css ("width", "480px"); $ (". item-31"). css ("width", "420px");

                $("#projects").stop().animate({width:'480px'},{queue:false, duration:300});

                $("#projects").css("background","#fff");

                $('#projectsList').hide();
                $('#projectsContent').show();
                $("#contact").stop().animate({left:'1524px'},{queue:false, duration:300});
                $("#footer").stop().animate({left:'1745px'},{queue:false, duration:300});

                var api = $('#projects').jScrollPane().data('jsp');
                api.destroy();
                $('#projects').jScrollPane({contentWidth:480}).data('jsp');

А в Firefox я не использую animateпотому что это не сработало, я просто использую $ ("# projects"). css ("width", "480px");

Это та же проблема, что я упоминал во второй частимой вопрос. У div .jspContainer и .jspPane нет уникальных идентификаторов. И я не могу дать их, потому что jScrollPane генерирует их.ширина их через jQuery будет перезаписана.

Answer 1

Попробуйте это:

var api = $('#projects').jScrollPane().data('jsp');
 api.destroy();  
 $("#projects").stop().animate({width:'480px'},300, function(){
                         $('#projects').jScrollPane({contentWidth:480}).data('jsp');
                    });

Пояснение:

1) Animate прекрасно работает в Firefox

2) Вам никогда не придется напрямую изменять размер jspContainer или jspPane, размеры которых устанавливаются jscrollpane при его инициализации, например, по телефону:

$('#projects').jScrollPane().data('jsp');

3) Если вы изменяете только содержимое области прокрутки, вам просто нужно повторно инициализировать его, чтобы он мог пересчитать полосы прокрутки и область содержимого, выполнив что-то вроде этого:

var api = $('#projects').jScrollPane().data('jsp');
api.reinitialise();

4) Если вы на самом деле изменяете размер div, к которому вы применяете jscrollpane, вам придется уничтожить экземпляр jscrollpane и воссоздать его. Я обнаружил, что при изменении ширины безопаснее явно указать ширину при этом, например:

var api = $('#projects').jScrollPane().data('jsp');
api.destroy();
$('#projects').width(480); 
$('#projects').jScrollPane({contentWidth:480}).data('jsp');

5) если вы анимируете ширину, вам нужно подождать, пока анимация не закончится, прежде чем вы сможете повторно инициализировать полосу прокрутки, чтобы инициализировать полосу прокрутки в функции обратного вызова анимации следующим образом:

     var api = $('#projects').jScrollPane().data('jsp');
     api.destroy();
     $("#projects").animate({width:'480px'},300, function(){
                         $('#projects').jScrollPane({contentWidth:480}).data('jsp');
                    });

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

$("#projects .content").animate({opacity:0},300, function(){ //anim branch 1
           //content fade animation finished now do this:
           var api = $('#projects').jScrollPane().data('jsp');
           api.destroy();
           $("#projects").animate({width:'480px'},300, function(){
                          // width change animation finished now do this:
                          $('#projects').jScrollPane({contentWidth:480}).data('jsp');
                          //fade content back in
                          $("#projects .content").animate({opacity:1},300);
           });
});
$("#contacts").animate({left:1000},300); //anim branch 2

7) Если вы используете $ ('. Element'). Hide (), это заставит элемент отображаться: нет; и убрать его со страницы, это означает, что если вы зададите для содержимого файла dic никакого отображения и попытаетесь применить к нему jscrollpane, размер будет рассчитан неправильно. Это работает, если вы вместо этого анимируете прозрачность, но, очевидно, не будет работать в браузерах, которые не поддерживают прозрачность.

8) Наконец, в шестом примере есть две ветки анимации, которые будут работать одновременно.

Answer 2

Я бы предложил вам применить jscrollpane() после загрузки окна. То есть используйте windows.load, а не document.ready.