Internals: DOM

The following markup structure is inserted inside the outer scroller <div>.

<!-- scrolling layers -->
<div class="-ts-layer -ts-outer"> <!-- vertical scrolling layer -->
    <div class="-ts-layer"> <!-- horizontal scrolling layer -->
        <div class="-ts-layer -ts-inner"> <!-- contents holder -->
            <!-- Scroller contents are re-inserted here -->
        </div>
    </div>
</div>

<!-- scrolling indicators -->
<div class="-ts-bars">
    <!-- Bar/indicator markup is only inserted if necessary -->
    <div class="-ts-bar -ts-bar-e"> <!-- The horizontal scroll indicator, rotated by 90˚ to have use the same styling for both indicators -->
        <div class="-ts-indicator-e"> <!-- container to apply general offset -->
            <div class="-ts-bar-part -ts-bar-1"></div> <!-- upper tip (remember, rotated by 90˚) -->
            <div class="-ts-bar-part -ts-bar-2"></div> <!-- middle part, height is applied via a scaleY transformation -->
            <div class="-ts-bar-part -ts-bar-3"></div> <!-- lower tip -->
        </div>
    </div>
    <div class="-ts-bar -ts-bar-f -ts-indicator-f">
        <div class="-ts-bar-part -ts-bar-1"></div>
        <div class="-ts-bar-part -ts-bar-2"></div>
        <div class="-ts-bar-part -ts-bar-3"></div>
    </div>
</div>

The complex layer markup is needed, because currently two elements per axis are used for flick/bounce animations; see Internals: Flick for details.