fiexd ant-design/ant-design#3923

Author: jljsj33

examples/scrollScreen.js

@@ -82,8 +82,8 @@ class Demo extends React.Component {
       </div>
       <Element className="pack-page page0" id="page0">
         <QueueAnim className="home-title">
-          <div className="page-title" key="title">
-            <p>{_package.name}@{_package.version}</p>
+          <div className="page-title" key="title" style={{ height: 100, overflow: 'auto' }}>
+            <p style={{ height: 600 }}>{_package.name}@{_package.version}</p>
           </div>
           <div className="page-description" key="c">
             <p>A scrollScreen demo</p>
@@ -100,7 +100,7 @@ class Demo extends React.Component {
         <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
           每次进入都启动播放
         </TweenOne>
-        <QueueAnim key="1">
+        <QueueAnim key="1" style={{ height: 100 }}>
           <div key="0" className="demo"></div>
           <div key="1" className="demo"></div>
           <div key="2" className="demo"></div>
@@ -110,8 +110,8 @@ class Demo extends React.Component {
 
       <ScrollOverPack
         className="pack-page page2"
-        style={{ backgroundColor: '#174270' }}
-        id="page3"
+        style={{ backgroundColor: '#174270', height: 500 }}
+        id="page2"
         playScale={1}
         hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
       >
@@ -133,7 +133,7 @@ class Demo extends React.Component {
         className="pack-page page3"
         style={{ backgroundColor: '#174270' }}
         always={false}
-        id="page2"
+        id="page3"
         playScale={1}
         hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
       >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",

src/ScrollScreen.jsx

@@ -22,43 +22,28 @@ const ScrollScreen = {
     this.toHeight = -1;
     this.num = 0;
     // this.currentNum = 0;
-    ['raf', 'cancelRequestAnimationFrame', 'onWheel', 'startScroll']
+    ['raf', 'cancelRequestAnimationFrame', 'onWheel', 'startScroll', 'isScroll']
       .forEach((method) => this[method] = this[method].bind(this));
     EventListener.addEventListener('wheel.scrollWheel', this.onWheel);
-    EventListener.addEventListener('scroll.scrollScreen', this.scrollEvent);
     // 刚进入时滚动条位置
-    // requestAnimationFrame(this.startScroll)
     setTimeout(this.startScroll);
   },
-  scrollEvent() {
-    const _mapped = mapped.getMapped();
-    const _arr = _mapped.__arr;
-    this.scrollTop = currentScrollTop();
-    _arr.forEach((str, i) => {
-      const dom = _mapped[str];
-      const domOffsetTop = dom.offsetTop;
-      const domHeight = dom.getBoundingClientRect().height;
-      if (this.scrollTop >= domOffsetTop && this.scrollTop < domOffsetTop + domHeight) {
-        this.currentNum = i;
-      }
-    });
-  },
+
   startScroll() {
     const _mapped = mapped.getMapped();
     const _arr = _mapped.__arr;
     if (!_arr.length) {
       EventListener.removeEventListener('wheel.scrollWheel', this.onWheel);
       return;
     }
-    this.scrollTop = window.pageYOffset;
+    this.scrollTop = currentScrollTop();
     _arr.forEach((str, i) => {
       const dom = _mapped[str];
       const domOffsetTop = dom.offsetTop;
       const domHeight = dom.getBoundingClientRect().height;
       if (this.scrollTop >= domOffsetTop && this.scrollTop < domOffsetTop + domHeight) {
         this.num = i;
         this.toHeight = domOffsetTop;
-        // this.currentNum = this.num;
       }
     });
     // 如果 toHeight === -1 且 this.scrollTop 有值时；
@@ -69,7 +54,6 @@ const ScrollScreen = {
         const tooNum = Math.ceil((this.scrollTop - endDom.offsetTop -
           endDom.getBoundingClientRect().height) / windowHeight);
         this.num = mapped.getMapped().__arr.length + tooNum;
-        // this.currentNum = this.num;
       }
       return;
     }
@@ -100,15 +84,35 @@ const ScrollScreen = {
     requestAnimationFrame.cancel(this.rafID);
     this.rafID = -1;
   },
+  getComputedStyle(dom) {
+    return document.defaultView ? document.defaultView.getComputedStyle(dom) : {};
+  },
+  isScroll(dom) {
+    const style = this.getComputedStyle(dom);
+    const overflow = style.overflow;
+    const overflowY = style.overflowY;
+    const isScrollOverflow = overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'
+      || overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';
+    if (dom === document.body) {
+      return false;
+    } else if (dom.scrollHeight > dom.offsetHeight
+      && isScrollOverflow
+      && dom.scrollTop < dom.scrollHeight) {
+      return true;
+    }
+    return this.isScroll(dom.parentNode);
+  },
   onWheel(e) {
     const _mapped = mapped.getMapped();
     if (!_mapped.__arr.length) {
       EventListener.removeEventListener('wheel.scrollWheel', this.onWheel);
       return;
     }
+    if (this.isScroll(e.target)) {
+      return;
+    }
     const deltaY = e.deltaY;
     e.preventDefault();
-    // console.log(e.wheelDelta,e.deltaY)
     if (this.rafID === -1 && deltaY !== 0 && this.toHeight === -1) {
       // 如果滚动条托动过了，需要获取当前的num;
       const _arr = _mapped.__arr;
@@ -165,14 +169,13 @@ const ScrollScreen = {
       windowHeight * (this.num - mapped.getMapped().__arr.length) : this.toHeight;
       this.toHeight = this.toHeight < 0 ? 0 : this.toHeight;
       this.toHeight = this.toHeight > docHeight - windowHeight ?
-        docHeight - windowHeight : this.toHeight;
+        (docHeight - windowHeight) : this.toHeight;
       this.rafID = requestAnimationFrame(this.raf);
-      // this.currentNum = this.num;
+      this.currentNum = this.num;
     }
   },
   unMount() {
     EventListener.removeEventListener('wheel.scrollWheel', this.onWheel);
-    EventListener.removeEventListener('scroll.scrollScreen', this.scrollEvent);
   },
 };
 export default {

src/util.js

@@ -91,11 +91,7 @@ export function objectEqual(obj1, obj2) {
 }
 
 export function currentScrollTop() {
-  const supportPageOffset = window.pageXOffset !== undefined;
-  const isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
-  const isCSS1ScrollTop = isCSS1Compat ?
-    document.documentElement.scrollTop : document.body.scrollTop;
-  return supportPageOffset ? window.pageYOffset : isCSS1ScrollTop;
+  return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
 }
 
 export function windowHeight() {