Реагировать JS: onWheel кипящего stopPropagation не работает

Question

TL; DR:

Смотрите мое jsfiddle ссылки, где прокрутка ребенок Div вверх до нижнего/верхний не следует начинать прокрутку родителя. Я пробовал использовать e.stopPropagation() , который не работал. Так что нужно решение (без использования mixins).

Мой код:

http://jsfiddle.net/vmvrphjn/

//////////HTML CODE 
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> 
<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 

////////CSS CODE  
.childScroll{ 
    max-height: 200px; 
    overflow-y: scroll; 
    background-color: white; 
    max-width: 200px; 
    margin: 0 auto; 
    border: 1px solid blue 
} 

.parentScroll { 
    text-align: center; 
    max-height: 300px; 
    overflow-y: scroll; 
    background-color: lightgreen; 
    padding: 10px; 
} 

////////JS CODE 
class Hello extends React.Component { 
    render() { 

    return (
    <div className='parentScroll'> 
      Scrollable Parent: <br /><br /> 
     <div className='childScroll' onWheel = {(e)=>{console.log('Scrolling Me..'); e.stopPropagation();}}> 
     Scroll CHILD LIST:1 <br /><br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     Some text blah<br /> 
     </div> 
    <div className='childScroll' onWheel = {(e)=>{console.log('Parent got scroll event');}}> 
     Scroll CHILD LIST:2 <br /><br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
     Hi text blah<br /> 
    </div> 
    </div> 
); 
    } 
} 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

Моя цель:

Я имею DIV какие свитки. Но, придя к вершине или внизу после прокрутки div, прокрутка начинается на самой странице, которую я не хочу. Я думаю, что это происходит из-за распространения событий, поэтому я пытаюсь остановиться в следующем порядке.

Моя реализация:

Я использую "расширяет компонент (ES6 путь)", чтобы создать свои компоненты. И я положил onWheel event listener как

Это утечка «Прокрутка меня», но я не могу прекратить распространение этого события родительскому. Не знаете, почему stopPropagation не происходит точно или эта проблема происходит из-за распространения

Я не хочу использовать библиотеки, которые использовали mixins, поэтому, пожалуйста, не предлагайте мне этот путь.

Answer 1

Я решил проблему, используя следующие способы.

РАНЬШЕ РЕШЕНИЕ:

const rdom = require('react-dom'); 

<div onMouseOver={() => { 
     const ele = rdom.findDOMNode(this); 
     if (ele.scrollTop === 0 && ele.scrollHeight === ele.clientHeight) { 
      return; 
     } else { 
      document.body.style.overflow = 'hidden'; 
     } 
    }} 
    onMouseOut={() => { 
     document.body.style.overflow = 'auto'; 
    }} 
</div> 

НОВОЕ РЕШЕНИЕ: (С Mac и Linux работает прокрутки по-разному, чем окна, указанное решение раздражает, как он удаляет и добавить полосу прокрутки в документ таким образом, уменьшения/увеличения его ширины, которые могут встряхнуть другие элементы)

handleScroll(e) { 

const ele = rdom.findDOMNode(this); 

if (e.nativeEvent.deltaY <= 0) { 
    /* scrolling up */ 
    if(ele.scrollTop <= 0) {e.preventDefault();} 
} 
else 
{ 
    /* scrolling down */ 
    if(ele.scrollTop + ele.clientHeight >= ele.scrollHeight) { 
    e.preventDefault(); 
    } 
} 


/*Look question for the placement of below CODE*/ 
onWheel={(e) => {this.handleScroll(e);}} 

Другое решение:

Вы также можете найти, если документ/окно/тело было прокручено вверх по вашему прокручиваемому div. А затем сделайте этот прокручиваемый div как позицию: исправлено. Исправленное свойство автоматически не позволяет документу/окну/телу получить это событие onWheel.

Answer 2

Я не хватает репутации комментировать, но проверить решение здесь:

Scrolling child div scrolls the window, how do I stop that?

$.fn.scrollGuard2 = function() { 
return this 
    .on('wheel', function (e) { 
    var $this = $(this); 
    if (e.originalEvent.deltaY < 0) { 
    /* scrolling up */ 
    return ($this.scrollTop() > 0); 
    } else { 
    /* scrolling down */ 
    return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight); 
    } 
    }); 
}; 

demo'ed: http://jsfiddle.net/3dxpyjoz/10/