Получить Класс или ID элемента, который скроллится

Question

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

Answer 1

Используя 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>

Answer 2

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

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

БЛОГ НА HUSL

Получить Класс или ID элемента, который скроллится

Ответы (2 шт):