The issue is with the focus flag (Reference Here) of the div.
To ensure that the div receives focus when clicked, you need to assign it a tabindex. The choice between using a negative, zero, or positive tabindex depends on your specific requirements.
If the value is a negative integer, the user agent will set the element's tabindex focus flag but prevent sequential focus navigation to it.
If the value is zero, the user agent sets the element's tabindex focus flag, allows for sequential focus navigation, and follows platform conventions for determining relative order.
If the value is greater than zero, the user agent sets the element's tabindex focus flag, enables sequential focus navigation, and includes the element in the sequential focus navigation order.
To make your example work, simply add:
<div class="child" tabindex="0">
...
</div>
Demo Fiddle: http://jsfiddle.net/abhitalks/y1boh9v7/3/
This solution should function correctly across all browsers (tested on IE-11, GC-39, and FF-34).
Below is an excerpt showcasing a method to hide scrollbars. You can hide scrollbars completely by increasing padding, although this example keeps them visible for simplicity. If you choose to hide scrollbars, provide an alternative scrolling mechanism like mouse-based drag-to-pan functionality using JavaScript.
In this snippet, the image pans when clicking the scrollbars, clicking the image and navigating with arrow keys, or touch-sliding.
Snippet:
div.scrollParent {
height: 240px; width: 240px;
border: 1px solid #eee;
overflow: hidden;
}
div.scrollChild {
height: 240px; width: 240px;
padding: 0px 12px 12px 0px;
overflow: auto;
}
img { display: block; }
<div class="scrollParent">
<div class="scrollChild" tabindex="0">
<img src='http://lorempixel.com/320/320' />
</div>
</div>
.