JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<div id="#wrapper">
<div id="x">
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
<img src="http://www.barneyb.com/barneyblog/wp-content/themes/hybrid/library/images/pingback.png" />
</div>
</div>
CSS
img{
margin-bottom:5px;
opacity:0.2;
}
#x{
width:1000px;
height:100px;
}
div{
width:250px;
height:120px;
overflow-x:auto;
}
JavaScript
var $div = $('div');
var divleft = $div.position().left;
$('div').scroll(function() {
$('img').each(function() {
img = $(this);
imgleft = img.position().left;
if (imgleft >= divleft && imgleft + img.width() <= divleft + $div.width()) {
$(this).css({
opacity: '1'
})
$(this).siblings('img').css({
opacity: '0.2'
});
return false;
}
});
})