JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="container">
  <div class="scrolling">
		<div class="topLine"></div>
		<div class="bottomLine"></div>
</div>

CSS

.container{
  width:400px;
  height:400px;
  position:relative;
	overflow:hidden;
	background-image:url("http://i2.cdn.turner.com/cnnnext/dam/assets/150324154025-14-internet-cats-restricted-super-169.jpeg");
  background-size:cover;
}
.scrolling{
  width:30px;
  height:30px;
  border-radius:50%;
  margin:auto;
  position:absolute;
  top:20px;
	border:2px solid #333;
}
.topLine{
	left:50%;
	margin-left:-1px;
	position:absolute;
	bottom:calc(100% + 2px);
	width:2px;
	background:#00f;
}
.bottomLine{
	left:50%;
	margin-left:-1px;
	top:calc(100% + 2px);
	position:absolute;
	width:2px;
	background:#00f;
}

JavaScript

function getCoords($el){
	return{
  	top:$el.position().top,
    bottom:($el.height() + $el.position().top)
  }
}
function setLines($el){
		var coords = getCoords($el);
		topLine.css("height", coords.top + "px")
		bottomLine.css("height", parseInt($el.parent().css("height")) - coords.bottom + "px");
}
var $el = $(".scrolling");		
var topLine = $el.find(".topLine");
var bottomLine = $el.find(".bottomLine");	

setLines($el);