Можно ли остановить прокрутку элемента с экрана с помощью CSS3? - PullRequest
Новая
       37

Можно ли остановить прокрутку элемента с экрана с помощью CSS3?

3 голосов
/ 09 июня 2011

У меня есть вложенный список покупок, который сгруппирован по типу (и содержит описания для каждого товара).

То, что я хочу сделать, это прокрутить последний тип в списке до точки, в которой он будет прокручиваться вверху списка.

Список может быть объявлен как 

<div id="items">
     <item-type>Type A</item-type>
     <description>a</description>
     <description>b</description>
     <description>c</description>
     <item-type>Type B</item-type>
     <description>d</description>
     <description>e</description>
     <description>f</description>
     <description>g</description>
     <description>h</description>
</div>

Я использую типы элементов, чтобы я мог использовать #items > item-type:last-of-type в CSS3 для выбора последнего элемента. 

#items {
word-wrap: break-word;
overflow: auto;
height: 100%;
}

#items > * {
    display: block;
}

#items > item-type:last-of-type {
    position:absolute;
    bottom: 100px;   
}

Итак, единственное, что я хочу сказать - как мне сохранить (эффективно) position: relative; top: 0 до position: absolute; top: 0, используя только CSS3?

Я использую FF4 и HTML5, так что вы можете сделать все возможное; это не будет поддерживаться в старых браузерах. Кроме того, можно использовать calc().

Допустимые параметры просмотра могут быть примерно такими: 

______________________________________
Type A            a             Type B 
  a               b               e
  b               c               f
  c             Type B            g
                  d               h
---------------------------------------

Где строки являются видимой областью, и каждый столбец показывает, как это будет выглядеть при определенном количестве данных (прогрессия слева направо)

Ответы [ 2 ]

3 голосов
/ 10 июня 2011

Если я правильно понимаю проблему, вы хотите создать что-то вроде списка iPhone Contacts . Глядя на решение кто-то уже построил оно использует JavaScript. Кроме того, я подумал об этом и прошел все спецификации CSS3, но не могу определить, что можно использовать здесь для достижения того же эффекта без JavaScript.

Я запустил небольшую демонстрацию , но опять-таки это использует JavaScript. Я просто не думаю, что это возможно с чистым CSS, хотя я уверен, что кто-то исправит меня, если это не так: -)

HTML 

<div id="items">
    <item-type>Type A</item-type>
    <description>a</description>
    <description>b</description>
    <description>c</description>
    <item-type>Type B</item-type>
    <description>d</description>
    <description>e</description>
    <description>f</description>
    <description>g</description>
    <description>h</description>
    <description>i</description>
    <description>j</description>
    <description>k</description>
    <description>l</description>
</div>

CSS 

#items {
    word-wrap: break-word;
    overflow: auto;
    height:100px;
    border:1px dashed red;
    width:200px;
}

#items > * {
    display: block;
}

#items > item-type {
    border:1px dashed blue;
    background-color:#fff;
    width:180px;
}

JavaScript (jQuery 1.6 +) 

var itemsTop = $('#items').position().top;
var itemTypeHeight = $('item-type').height();
var itemTypeBottom = itemsTop + itemTypeHeight;

$('#items').scroll(function() {
    $('item-type').each(function() {
        $(this).css({position:''});

        if ($(this).position().top < itemsTop + itemTypeHeight) {
            $(this).css({position:'fixed',top:itemsTop});
        }
    });
});
0 голосов
/ 10 июня 2011

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

  • При обычном просмотре требуется позиция relative;в верхней части видимой области ее нужно изменить на absolute
  • , вы можете использовать calc() и min() или max() с видимой высотой, высотой текущего элемента и текущей прокруткойпозиция;за исключением того, что ни одно из этих вычисляемых свойств не доступно для css
  • Другая идея заключается в более абсолютном позиционировании 2-го уровня элемента, но нет способа сослаться на высоту абсолютного родителя, а также высоту абсолютного прародителя.

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

...