React JS:onWheel 冒泡 stopPropagation 不起作用 [英] React JS: onWheel bubbling stopPropagation not working

问题描述

<块引用>

TL;博士:

请参阅我的 jsfiddle 链接，其中将子 div 向上滚动到底部/顶部不应开始滚动父级.我尝试使用 e.stopPropagation()这不起作用.所以需要解决方案(不使用mixins).

<块引用>

我的代码:

http://jsfiddle.net/vmvrphjn/

//////////HTML 代码<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script><div id="容器"><!-- 此元素的内容将替换为您的组件.-->

////////CSS代码.childScroll{最大高度:200px；溢出-y:滚动；背景颜色:白色；最大宽度:200px；边距:0 自动；边框:1px纯蓝色}.parentScroll {文本对齐:居中；最大高度:300px；溢出-y:滚动；背景颜色:浅绿色；填充:10px；}////////JS代码class Hello 扩展 React.Component {使成为() {返回 (

可滚动父级:<br/><br/><div className='childScroll' onWheel = {(e)=>{console.log('Scrolling Me..');e.stopPropagation();}}>滚动子列表:1 <br/><br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>一些文字废话<br/>

<div className='childScroll' onWheel = {(e)=>{console.log('Parent got scroll event');}}>滚动子列表:2 <br/><br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>嗨文本等等<br/>

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

<块引用>

我的目标:

我有一个滚动的 div.但是在滚动 div 后到达顶部或底部时，滚动开始发生在我不想要的整个页面上.我认为这是由于事件传播而发生的，所以我试图以下列方式停止.

<块引用>

我的实现:

我正在使用扩展组件(es6 方式)"来创建我的组件.我已经把 onWheel 事件监听器设为

很好地安慰了滚动我"，但我无法停止将此事件传播给父级.不知道为什么 stopPropagation 没有完全发生，或者这个问题是否因为传播而发生

我不想使用使用 mixin 的库，所以请不要这样建议我.

解决方案

我通过以下方式解决了这个问题.

早期解决方案:

const rdom = require('react-dom');<div onMouseOver={() =>{const ele = rdom.findDOMNode(this);if (ele.scrollTop === 0 && ele.scrollHeight === ele.clientHeight) {返回;} 别的 {document.body.style.overflow = '隐藏';}}}onMouseOut={() =>{document.body.style.overflow = 'auto';}}

新解决方案:(由于 Mac 和 Linux 操作滚动条与 Windows 不同，上述解决方案很烦人，因为它删除了滚动条并将其添加到文档中，从而减少/增加了其宽度，可能会震动其他元素)

handleScroll(e) {const ele = rdom.findDOMNode(this);如果(e.nativeEvent.deltaY <= 0){/*向上滚动*/if(ele.scrollTop <= 0) {e.preventDefault();}}别的{/* 向下滚动 */if(ele.scrollTop + ele.clientHeight >= ele.scrollHeight) {e.preventDefault();}}/*看下面CODE位置的问题*/onWheel={(e) =>{this.handleScroll(e);}}

另一种解决方案:

您还可以找到文档/窗口/正文是否已向上滚动到可滚动 div.然后将这个可滚动的 div 设置为 position: fixed.固定属性自动不会让文档/窗口/正文获得 onWheel 事件.

TL;DR:

See my jsfiddle link where scrolling child div up till bottom/top should not start scrolling parent. I tried using e.stopPropagation() which didn't work. So need solution (without using mixins).

My Code:

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

My Target:

I am having a div which scrolls. But on coming to the top or the bottom after the scrolling the div, the scrolling starts happening on the entire page itself which I don't want. I think it's happening due to event propagation, so I am trying to stop in following manner.

My Implementation:

I am using "extends Component (es6 way)" to create my components. And I've put onWheel event listener as

It's consoling out 'Scrolling Me' fine but I am not able to stop propagating this event to the parent. Not sure why stopPropagation is not happening exactly or whether this issue is happening because of propagation

I don't want to use libraries which used mixins, so please don't suggest me this way.

解决方案

I resolved the issue using following ways.

EARLIER SOLUTION:

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>

NEW SOLUTION: (Since Mac and Linux operates scroll bars differently than windows, the above solution is annoying as it removes and add scroll bar to the document thus reducing/increasing its width which can shake other elements)

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

ANOTHER SOLUTION:

You can also find the if document/window/body has been scrolled uptil your scrollable div. And then make this scrollable div as position: fixed. Fixed property automatically doesn't let the document/window/body get that onWheel event.

这篇关于React JS:onWheel 冒泡 stopPropagation 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！