Якорь внутри прокрутки в состоянии DIV в два столбца строки - PullRequest
Новая
       12

Якорь внутри прокрутки в состоянии DIV в два столбца строки

0 голосов
/ 04 мая 2019

У меня есть строка из двух столбцов, в которой можно прокрутить второй столбец. Как я могу щелкнуть ссылку в первом столбце и прокрутить второй столбец до нужного содержимого.

В настоящее время код выглядит следующим образом: 

  <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>

1 Ответ

0 голосов
/ 05 мая 2019

Нашел собственное решение. Надеюсь, что это может помочь кому-то еще Работает на мобильных устройствах, планшетах и ​​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'
 });
...