React JS:onWheel bubbling stopPropagation无效

时间:2016-01-14 13:32:13

标签: reactjs react-jsx

  

TL; DR:

请参阅我的jsfiddle链接,其中滚动子div直到bottom / top不应该开始滚动父级。我尝试使用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之后进入顶部或底部时,滚动开始发生在我不想要的整个页面上。我认为它是由于事件传播而发生的,所以我试图以下面的方式停止。

  

我的实施:

我正在使用&#34;扩展组件(es6方式)&#34;创建我的组件。而且我把onWel事件监听器作为

安慰我滚动我&#39;很好,但我无法停止将此事件传播给父母。 不确定为什么stopPropagation没有完全发生,或者是否因为传播而发生了这个问题

我不想使用使用mixins的库,所以请不要这样建议我。

2 个答案:

答案 0 :(得分:4)

我使用以下方法解决了这个问题。

更早的解决方案:

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);}}

另一种解决方案:

您还可以找到if文档/窗口/正文已滚动到您的可滚动div。然后将这个可滚动的div作为position:fixed。固定属性自动不会让文档/窗口/正文获得onWheel事件。

答案 1 :(得分:1)

我没有足够的声誉来评论,但请在此处查看解决方案:

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);
   }
  });
};  

演示:http://jsfiddle.net/3dxpyjoz/10/