scrolling with a transparent padding

HTML

<div class="container">
    <div class="cover left"></div>    
    <div class="content">
        <div class="item">0</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
    <div class="cover right"></div>    
</div>

CSS

html, body {
    margin: 0;
    overflow: hidden;
}

.container {
    background-color: #666;
    padding-top: 40px; /* bottom padding is on the content */
    box-sizing: border;
    position: relative;
    font-size: 0; /* ignore whitespace */
}

.content {
    width: 100%;
    background-color: #666;
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 40px; /* move scrollbar down */
}

.item {
    display: inline-block;
    margin-right: 10px;
    height: 200px;
    width: 50%;
    background-color: #AAA;
    font-size: 1rem;
}
.item:first-child { margin-left: 40px; }
.item:last-child { margin-right: 40px; }

.cover {
    position: absolute;
    top: -40px; /* uncover scrollbar */
    width: 40px;
    height: 100%;
    background-color: #666C;
}
.cover.left { left: 0; }
.cover.right { right: 0; }