2013-07-10 1 views
0

TL; DR: Как заставить IE7 загружать все элементы, скрытые прокручиваемым div?IE7 не загружает содержимое в прокручиваемом div до прокрутки

Я создаю меню «сбрасываемое», чтобы перемещаться по множеству страниц. Это меню имеет два состояния, взорванных и взорванных.
Элементы меню, как главы книги, по мере продвижения пользователя по содержимому, элемент «активный» перемещается вниз.
На pageload, я хочу <div>, где предметы расположены для мгновенного прокрутки вниз (!) До активного пункта меню, минус какое-то смещение.

Как обычно, это прекрасно работает на хроме и ff, но не на ie7.

В разобранном состоянии, кажется, что ie7 не утруждает себя «загрузкой» предметов, когда они не видны при загрузке страницы. Что происходит, так это то, что ie7 запускает меню div без полосы прокрутки (или очень маленькой). Когда я устанавливаю scrollTop на требуемую сумму. Div просто прокручивается вниз до тех пор, пока полоса прокрутки не ударит по «нижней части div», а затем ie7 начнет загружать следующие фрагменты содержимого, и я могу прокручивать дальше, пока не найду другое «нижнее» и т. Д.

Мне удалось обойти это, используя анимацию длиной 1000 мс (просто выбрал номер). Он не соответствует указанным требованиям (и выглядит уродливым), и мне интересно, как я могу заставить ie7 загружать этот контент до его запроса, поскольку он, кажется, не загружает его.

Пользователи IE7 - наша самая большая целевая группа, поэтому этого не происходит. И сделать вещи доступными для пользователей без javascript - огромный плюс.

В состоянии взлома нет проблем, я пробовал использовать части вложенных состояний CSS в разнесенных состояниях и позже устанавливал их в правильные значения, не помогал.

Вот код:

scrollToCurrent = function(length){ 
    var prev = $("div.scroller div.selected").prev(); 

    // Check if previous exists 
    if($(prev).length > 0) { 
     // number of previous items * height of an item - half an items height 
     var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight()/2); 

     if(length === 0) { 
      $("div.scroller").scrollTop(scrollY); 
     } else { 
      $(".scroller").animate({ 
       scrollTop : scrollY 
      }, length); 
     } 
    } 
}; 

Если вам нужно больше, дайте мне знать.

EDIT: Основные jsfiddle: http://jsfiddle.net/AmazingDreams/keeUY/ http://jsfiddle.net/AmazingDreams/keeUY/embedded/result/

+2

'Пользователи IE7 - наша самая большая целевая группа' - серьезно? У вас печальная реальность. Кстати, вы уже пробовали какой-то плагин? Я знаю, это не твоя настоящая проблема, но может быть экономия времени - даже при работе с консервативными людьми *. Чтобы закончить, [см. Здесь] (http://manos.malihu.gr/jquery-custom-content-scroller/) - это очень хороший выбор для вас. И, наконец, чтобы помочь вашему реальному вопросу, можете ли вы опубликовать jsFiddle? –

+0

'Пользователи IE7 - наша самая большая целевая группа. Я думаю, что вы единственный человек, у которого IE7 ... 0,8% имеют IE7 ... –

+0

То, что 0,8% будет нашей целевой группой, я не могу с этим поделать. Я посмотрю, смогу ли я собрать jsFiddle. И взгляните на этот плагин. – AmazingDreams

ответ

0

UPDATE

Окончательное решение оказалось очень простым. Поскольку ничего, казалось, не работало и не исправлялось, одна ситуация нарушала другую (были существенные различия между тем, был ли выбран выбранный элемент изначально). Я решил просто выбить sh * t из полосы прокрутки:

Я удалил все старые ' фиксирует

scrollToCurrent = function(length){ 
     var prev = $("div.scroller div.selected").prev(); 

     // Check if previous exists 
     if($(prev).length > 0) { 
      // number of previous items * height of item - half an items height 
      var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight()/2); 

      if(length === 0) { 
       var i = 0; 
       var maxpushes = 100; 

       // Push just as long as needed to get the scrollbar to where we want it to (fixes ie7 issue) 
       while($("div.scroller").scrollTop() < scrollY) { 
        $("div.scroller").scrollTop(scrollY); 

        // Make sure it can never turn into an endless loop 
        i++; 
        if(i > maxpushes) { 
         break; 
        } 
       } 
      } else { 
       $(".scroller").animate({ 
        scrollTop : scrollY 
       }, length); 
      } 
     } 
    }; 

OLD нерабочими ПОПЫТКИ

мне удалось 'исправить' его, помещая это как дополнительный пункт: Обновлено FIX НИЖЕ

<div class="cycle inactive"> 
     <?php // I fix IE7 issues ?> 
    </div> 

Я думаю, что новая линия в <div> делает 99% работы. Так что держи эту линию там.

Я не думаю, что это «исправление», и я оставлю этот вопрос открытым, сначала я хочу, чтобы эта вещь была стабильной на некоторое время.

EDIT:

Ну, это 'крупное обновление' просто перевернул проблему вокруг (т.е. интегрировалась перестал работать, взорвался работал). Обновленное исправление:

<?php // Only show if menu starts exploded ?> 
<?php if(! $imploded): ?> 
    <div class="cycle inactive"> 
     <?php // I fix IE7 issues ?> 
    </div> 
<?php endif; ?> 

 Смежные вопросы

  • Нет связанных вопросов^_^