Как остановить прокрутку Отложить на родительскую полосу прокрутки

Question

У меня есть родительский контейнер, который установлен в overflow: auto: и контейнер внутри него с overflow: auto. Когда я навис над контейнером прокрутки дочерних элементов, я хочу только прокрутить этот контейнер, а не родительский контейнер, и наоборот.

В настоящее время, когда я прокручиваю страницу вниз, родительский прокручивает до дочернего контейнера, затем начинает прокручивать дочерний контейнер, а затем возвращается к родительскому контейнеру, когда ребенок закончил прокрутку. Есть ли способ предотвратить это?

Вот пример того, что у меня есть:

<div class="parent"> 
    <div>Outter text</div> 
    <div>Outter text</div> 
    <div>Outter text</div> 
    <div>Outter text</div> 
    <div>Outter text</div> 
    <div>Outter text</div> 
    <div class="scroll-container"> 
     <ul> 
      <li>Stuff</li> 
      <li>Stuff</li> 
      <li>Stuff</li> 
      <li>Stuff</li> 
      <li>Stuff</li> 
      <li>Stuff</li> 
      <li>Stuff</li> 
     </ul> 
    </div> 
    <div>Outter text</div> 
    <div>Outter text</div> 
    <div>Outter text</div> 
</div> 

и мой CSS:

.parent { 
    height: 100px; 
    overflow-y: auto; 
    border: 1px solid black; 
} 

.scroll-container { 
    height: 35px; 
    overflow-y: auto; 
    color: red; 
} 

Вы заметите в этом jsFiddle, что, как вы прокрутите вниз до scroll-container скроллинг будет deffer первым от parent (что ожидается, так как мышь зависает над scroll-container), но затем возвращается к parent, когда она достигла дна (это то, что я чувствую d хотел бы предотвратить).

Я не против использования jQuery/javascript, но я хотел бы избежать, если это возможно.

Answer 1

кажется Hacky, но, кажется, это исправить:

DEMO jsFiddle

(function() { 
    var scrollTop; 
    $('.scroll-container').attr('tabindex', -1).css('outline', 'none'); 
    $('.parent').on('scroll', function() { 
     var $scrollContainer = $(this).find('.scroll-container'); 
     if ($scrollContainer.is(':focus, :hover')) { 
      this.scrollTop = scrollTop; 
     } 
    }); 
    $('.scroll-container').on('focus mouseenter', function() { 
     scrollTop = $(this).closest('.parent').scrollTop(); 
    }); 
}());