Geek asks and answers

Can I stop an element scrolling from the screen using CSS3?

I have a nested list of store types that is grouped by type (and has descriptions for each item).

What I want to do is scroll the last type in the list until it scrolls to the top of the list.

The list can be declared as

<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>

I use element types, so I can use #items > item-type:last-of-typein CSS3 to select the last element.

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

#items > * {
    display: block;
}

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

So now the only thing that I can save (efficiently) position: relative; top: 0up to position: absolute; top: 0using only CSS3?

I use FF4 and HTML5, so you can go all out; this will not be supported in older browsers. In addition, use is calc()in order.

Valid viewing options are:

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

, , ( )

+3
2

, - iPhone. - , 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});
        }
    });
});
+3

, ( ):

  • relative; , absolute
  • calc() min() max() , ; , css
  • - 2- , , .

, , . , css .

0

More articles:


All Articles