Limit viewport scrolling to part of content with CSS

I like to have a line of elements (eg. inline-blocks, maybe in a flex container), that can overflow the viewport. However the first and last are dummy ones, considered as non-content, only to appear partially at the viewport edges.

Let's say we have:

#container {  display: flex;}#container div {  margin: 100px;  min-width: 500px;  min-height: 500px;  background: grey;}#container div.dummy {  background: pink;}

<div id="container"><div class="dummy">Element 1</div><div>Element 2</div><div>Element 3</div><div>Element 4</div><div class="dummy">Element 5</div></div>

How can I restrict the scrolling to a smaller area, eg. crop 500px from each side for example, having the container overflow the viewport, but without the possibility to scroll there? Is this possible with simple and clean CSS ?