0

На странице динамически размещаются элементы, которые можно скроллить. В определённый момент происходи скролл. Как получить ID или class элемента, который проскроллили?

2 ответа 2

0

Используя 3 параметр (useCapture = true) метода addEventListener, устанавливаем слушателя на все события скролла, а далее просто получаем свойство id или className элемента, вызвавшего событие

document.addEventListener('scroll', function(event) {
  
    console.log(event.target.className, event.target.className);
  
}, true);
<div class="scrol1" id="s1" style="width: 300px; overflow: auto; height: 100px;">
  <table>   
    <thead>    
      <tr>      
        <th>Name</th>      
        <th>Phone</th>    
      </tr>  
    </thead>  
    <tbody>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>
    </tbody>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>
  </table>
</div>

<div class="scrol2 div2" id="s2" style="width: 300px; overflow: auto; height: 100px;">
  <table>   
    <thead>    
      <tr>      
        <th>Name</th>      
        <th>Phone</th>    
      </tr>  
    </thead>  
    <tbody>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>
    </tbody>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>    
      <tr>      
        <td>Jennifer</td>      
        <td>502-5366</td>    
      </tr>
  </table>
</div>

3
  • Спасибо! Это работает. Может быть у Вас есть мысль как программно проскроллить динамически создаваемый элемент $(".fancybox-slide").animate({ scrollTop: "300px" }); 6 дек 2021 в 15:09
  • если они динамически создаются, то им можно динамически цеплять нужный класс и по нему уже цеплять скролл
    – Sanya H
    6 дек 2021 в 15:14
  • При клике на кнопку почему-то не происходит скролл. $(document).on('click', '#id', function(e) { $(".fancybox-slide").animate({ scrollTop: "300px" }); }) 6 дек 2021 в 15:40
0

ответ на вопрос в комментариях о скролле при нажатии на кнопку

$(document).on("click", "#up", function() {
    $(".fancy-box").animate({ scrollTop: "0" });
})

$(document).on("click", "#down", function() {
    $(".fancy-box").animate({scrollTop: $("#up").first().position().top }, 2000);
})
.scrollable {
    background-color: grey;
    height: 500px;
}

.fancy-box {
  height: 200px;
  overflow: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fancy-box">
    <button id="down">
        Scroll To Top
    </button>
    <div class="scrollable"></div>
    <button id="up">
        Scroll To Top
    </button>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.