Effect of scrolling on ``jQuery.offset()``

by lddubeau

HTML

<div id="contain">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel molestie leo, sit amet fermentum sem. Nam justo felis, gravida eu neque at, molestie facilisis mi. Donec pretium luctus egestas. Donec elementum vehicula quam, a semper leo. Duis elementum tincidunt lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rhoncus tortor. Nunc tincidunt, enim sed vulputate convallis, urna purus ultricies libero, sit amet molestie arcu massa pharetra arcu. Vestibulum et iaculis neque, ut auctor lacus. Nullam ac lorem sit amet odio tristique fermentum eu et odio. Quisque elementum malesuada consequat. Aliquam ornare velit at velit scelerisque luctus. Morbi adipiscing consequat dictum. Cras ultrices in ipsum non faucibus.</p>
    <p id="target">Target!</p>
    <p>n sem turpis, adipiscing fermentum orci nec, molestie elementum metus. Fusce condimentum id mi ut imperdiet. Aenean dictum ultricies lobortis. Nullam quis orci suscipit, aliquet lorem in, gravida mauris. Ut sit amet velit a neque fermentum vestibulum eget sed lorem. Cras eu eros aliquet eros auctor dapibus. Pellentesque faucibus vitae lectus ac adipiscing. Curabitur ut massa libero. Etiam tristique tincidunt vehicula. Duis id commodo lectus.</p>
</div>
<button id="position">Position</button>
<ul id="log"></ul>

CSS

#contain {
    height: 100px;
    overflow: auto;
}

JavaScript

$(function () {
    var $log = $("#log");
    var $target = $("#target");
    function position() {
        $log.append("<li>" + JSON.stringify($target.offset()) + "</li>");
        while ($log.children().length > 10)
            $log.children().first().remove();
    }
    $("#contain").scroll(position);
    $("#position").click(position);
});