如何将网格项div的右侧滚动到视图中？

Question

任何人都可以帮助我了解这是怎么回事。我正在创建一个水平滚动div [grid]，子网格项目在[grid-item]中我希望执行一个函数一旦[grid-item] div的右侧在视图中出于某些奇怪的原因我永远不会只需滚动即可到达该div的右侧。

.grid{
    margin:10px 0 0 0; 
    height:540px; 
    width:100%; 
    overflow-x:scroll; 
    background:white;  
    white-space:nowrap;
}

.grid-item {
    margin-right:10px;       
}

.grid-sub-item {
    list-style-type:none; 
    display:inline-block; 
    margin-left:50px; 
    padding:10px; 
    border:1px solid gray; 
    height:400px; 
    width:600px;
}
<div class="grid">
  <div class="grid-item">
  <div class="grid-sub-item">1</div>
  <div class="grid-sub-item">2</div>
  <div class="grid-sub-item">3</div>
 </div>
</div>