Inner scroll

by Bacher

HTML

<div class="outer">
    <p>LOL</p>
    <div class="container">
        <div class="inner">
            <p>T E X T T E X T T E X T T E X T T E X T T E X T</p>
        </div>
    </div>
    <p>LOL END</p>
</div>

CSS

.outer {
    outline: 1px solid green;
    width: 300px;
    height: 300px;
    overflow: auto;
}

.container {
    outline: 1px solid red;
    height: 400px;
    width: 100px;
    overflow: auto;
}

.inner {
    outline: 1px dotted gray;
    width: 10px;
}

JavaScript

$('.container').on('scroll', function(ev) {
    console.log('stop propagation');
    ev.stopPropagation();
});