javascript - 锚定在两列行中的可滚动 DIV 内

Question

我有一个两列的行，其中第二列可以滚动。我怎样才能单击第一列中的链接并让第二列滚动到相关内容。

目前代码如下:

  <style>
    .row {width:100%;}
    .col1 {} 
    .col2{ width:425px; float:left; height:450px; overflow-x:hidden; overflow-y: scroll; margin-bottom: 5px; margin-top: 5px; background: #3b435f; }
  </style>

 <div class='row'>
   <div class='col1 '>
   <a href = '#1'> link 1 </a><br>
   <a href = '#2'> link 2 </a><br>
   <a href = '#3'> link 3 </a><br>
   <a href = '#4'> link 4 </a><br>
   <a href = '#5'> link 5 </a><br>
   <a href = '#6'> link 6 </a><br>
   </div>
   <div class= 'col2'>
       <div id='1'> some words</div>
       <div id='2'> some words</div>
       <div id='3'> some words</div>
       <div id='4'> some words</div>
       <div id='5'> some words</div>
       <div id='6'> some words</div>
       <div id='7'> some words</div>
       <div id='8'> some words</div>
   </div>

Answer 1

找到我自己的解决方案。希望这可以帮助其他人在手机、平板电脑和 IE、FireFox、Safari 和 Chrome 上工作:

<div class="MyDiv" onclick="ScrollToCard()">Find Me</div>

 function ScrollToCard(CardIndex)
 {
 var myDiv            = document.getElementById('col2');
 var myDivrect        = myDiv.getBoundingClientRect();

 var szCardId         = CardIndex.toString(10); 
 var Card             = document.getElementById(szCardId);
 var Cardrect         = Card.getBoundingClientRect();
 var CardHeight       = Cardrect.height;
 var CardWidth        = Cardrect.width;
 var DefaultTopSpace  = 25;
 var MarginLeft       = 10;
 var MarginRight      = 10;

 var CardsPerRow      = Math.round(myDivrect.width / (CardWidth + MarginLeft       + MarginRight ));
 var Distance         = (DefaultTopSpace + ((CardHeight + DefaultTopSpace ) * (CardIndex-1)/CardsPerRow)) ;
 var Offset           = 0;
 if(CardsPerRow== 2)
    Offset = CardHeight;
 if(CardsPerRow== 3)
    Offset = CardHeight;   

 Distance = Distance - Offset;

  myDiv.scrollTo({
  top: Distance,
  left: 0,
  behavior: 'smooth'
 });