ie11: set focus on scroller

by Stephane de Luca

HTML

<div>
        <h1>The header</h1>
    
<section>
    <div class="vScrollable">
        <h1>Scrollable one</h1>
        <hr>
        <p>Paragraph one.</p>
        <p>Paragraph two.</p>
        <p>Paragraph three.</p>
        <p>Paragraph four.</p>
        <p>Paragraph five.</p>
        <p>Paragraph six.</p>
        <p>Paragraph seven.</p>
        <p>Paragraph eight.</p>
        <p>Paragraph nine.</p>
    </div>
    <div class="vScrollable selected">
        <h1>Scrollable two</h1>
        <hr>
        <p>Paragraph one.</p>
        <p>Paragraph two.</p>
        <p>Paragraph three.</p>
        <p>Paragraph four.</p>
        <p>Paragraph five.</p>
        <p>Paragraph six.</p>
        <p>Paragraph seven.</p>
        <p>Paragraph eight.</p>
        <p>Paragraph nine.</p>
    </div>
</section>
</div>

SCSS

* {
    font-family: AvenirNextCondensed-regular, arial, "sans-serif";
    
    &:focus {
        border: dotted 5px blue;
    }
}

section {
    height: 100px; 
    border: solid 4px brown;
    background-color: red;
    color: white;
    padding: 8px;
}

.vScrollable {
    overflow-y: scroll;
    height: 100%;
    float: left;
    margin: 10px;
    color: lightgray;
}

*:focus {
    border: dotted 6px yellow !important;
    color: white;
}

JavaScript

setTimeout(function() {
    $(".vScrollable")[1].focus();
    //alert("focused");
}, 250);