Автоскролл к фокусируемому елементу js and react

370

16 января 2017, 22:07

Здравствуйте, есть проблемка, нужно сделать автоподскрол елемента на центр когда он в фокусе, то есть идет до центра а дальше стоит там до самого конца автоматическим подскроллом, должно быть на чистом js без jQuery и других подпобных либ (в этом и проблема нужен натив) это щастье будет реализировано на react... Спасибо!!!) от сам код который отображает ситуацию (состряпан на скорою руку)...

<!DOCTYPE html> 
<html> 
<head> 
<script> 
var i = 0; 
setInterval(function(){ 
	i++; 
	document.getElementById('it-'+i).focus();  	 
},1000); 
</script> 
<style> 
body { 
    background-color: lightblue; 
} 
.main-container{ 
    position: absolute; 
    background-color: rgb(241, 241, 241); 
    display: flex; 
    width: 100%; 
    white-space: nowrap; 
    align-items: center; 
} 
.left-side{ 
width: 20%; 
display: inline-block; 
  vertical-align: middle; 
    text-align: left; 
} 
.right-side{ 
width: 25%; 
display: inline-block; 
    vertical-align: middle; 
    text-align: left; 
} 
.container{ 
overflow: hidden; 
    position: relative; 
    white-space: nowrap; 
    margin-right: 1vw; 
    margin-left: 1.2vw; 
    flex-grow: 1; 
} 
.mid-slider{ 
	display: flex; 
    height: 100%; 
    width: 100%; 
    overflow-y: hidden; 
    overflow-x: auto; 
} 
button{ 
padding:0 5vw; 
} 
button:focus{  
background: red; 
} 
</style> 
</head> 
<body> 
<div class='main-container'> 
<div class='left-side'></div> 
<div class='container'> 
	<div id="middle" class='mid-slider'> 
	<button id='it-1'>Hello is</button> 
    <button id='it-2'>Hello</button> 
    <button id='it-3'>Hell</button> 
    <button id='it-4'>Hello</button> 
    <button id='it-5'>lo</button> 
    <button id='it-6'>The Hello</button> 
    <button id='it-7'>TellHello</button> 
    <button id='it-8'>Hello</button> 
    <button id='it-9'>He</button> 
    <button id='it-10'>eweHello</button> 
    <button id='it-11'>w2224wewwe</button> 
    <button id='it-12'>Heweo</button> 
    <button id='it-13'>Hweello</button> 
    </div> 
</div> 
<div class='right-side'></div> 
</div> 
</body> 
</html>