DOM scrollLeft/scrollTop visualizer

by dipish

HTML

<div class="scrollable" id="myScrollable">
    <p><img src="http://www.xperiablog.net/wp-content/uploads/2012/02/Xperia-S_8-200x150.jpg" alt="Xperia S" title="Xperia S" width="200" height="150" class="alignright size-thumbnail wp-image-5695" />Sony Mobile kindly loaned us an Xperia S yesterday and we’ve been exploring the handset since. We’re not going to bother doing an unboxing as there’s already plenty of videos out there, however we thought we’d post our initial impressions. We were handed a black version that uses a matte plastic finish. Below we’ve written what has really stood out so far in testing and on the flip-side what issues we’ve faced. </p>
<p>We’ve also included the phone’s welcome screenshots along with the five home screens when you first set up the phone. This usually gives you a good idea what Sony Mobile is trying to promote. It’s too early to judge battery life and the camera performance, so we’ll talk about those in a future post. Click through for our impressions, but remember these are only our preliminary views. <span id="more-5694"></span><br clear="all"></p>
<h3>What we like</h3>
<p><strong>Display is absolutely gorgeous –</strong> For us the real stand out feature of the Xperia S is the 4.3-inch TFT LCD display. The display may not have the same levels of contrast found in an AMOLED display, but the colour and text reproduction is superb. We could actually read web page text without zooming in. The colours of photos and videos are vibrant and the Bravia Engine helps in this regard. There are only a few phones out there that better the iPhone 4’s retina display and the Xperia S is one of them. It has a pixel density of 342 PPI versus 326 PPI for the iPhone 4/4S. </p>
<p><strong>Smooth UI –</strong> We tried the Cosmic Flow wallpaper on some of our 2011 Xperia handsets and it was a bit laggy. There’s no such problems on the Xperia S with most of the UI interactions being very smooth. We even tested some games like Reckless Getaway that...

CSS

body {
    padding: 10px;
}
.scrollable {
    margin-top: 100px;
    width: 400px;
    height: 300px;
    background: #fff;  /* set opaque background */
    overflow: auto;
    border: solid 5px green;
}

/***** SCROLLVIZ *****/
.scrollviz-wrapper {
    position: relative;
}

    .scrollviz-meter {
        position: absolute;
        right: 0;
        color: blue;        
        font-size: 18px;
    }
        .scrollviz-meter-value {
            font-weight: bold;
            display: inline-block;
            text-align: right;        
            min-width: 50px;
        }

JavaScript

function scrollViz(el) {
    el = $(el);
    var wrapper = $(
            '<div class="scrollviz-wrapper">' +
                '<div class="scrollviz-meter">' +
                    'scrollTop: <span class="scrollviz-meter-value">0</span>px' +
                '</div>' +
            '</div>'
        ),
        valueField = wrapper.find('.scrollviz-meter-value'),
        ghost = el.get(0).cloneNode(true),
        elParent = el.parent(),   // remember original element parent
        targetWidth = el.get(0).clientWidth,  // get raw clientWidth
        borderTopWidth = el.css('border-top-width'),
        borderLeftWidth = el.css('border-left-width');
    
    ghost.id = 'ghost-' + Math.floor(Math.random() * 100000);    // set unique id
    ghost = $(ghost);
    ghost.addClass('scrollviz-ghost')
         .css({  // assign CSS here so it overrides any cloned element styles
             'position': 'absolute',
             'top': borderTopWidth,
             'left': borderLeftWidth, // TODO zero or border-left-width
             'margin': 0,
             'overflow': 'visible',
             'height': 'auto',
             'z-index': '-1',
             'border': 'none',
             'opacity': 0.3,
             'width': targetWidth
    });
    ghost.appendTo(wrapper);
    // reattach element to wrapper
    el.detach().appendTo(wrapper);
    // put the wrapper back into DOM, inside our element's original parent
    wrapper.appendTo(elParent);
    
    // bind to element scroll
    el.scroll(function() {
        ghost.css('top', -this.scrollTop + parseInt(borderTopWidth, 10));
        valueField.text(this.scrollTop);
    });
}

scrollViz($('#myScrollable'));