Skip to content

Commit 47fa524

Browse files
jljsj33jljsj33
committed
add targetId
1 parent 33a6f6c commit 47fa524

File tree

6 files changed

+91
-18
lines changed

6 files changed

+91
-18
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ ScrollAnim.scrollScreen.unMount();
118118
|-----------|----------------|---------|----------------|
119119
| component | string | `div` | - |
120120
| id | string | null | need to location the id，parallax the `location` or link the `to`, need to use |
121+
| targetId | string | null | scroll target id, if don't window scroll, parent element is `overflow: scroll`, use parent id to do scroll; [demo refs](http://react-component.github.io/scroll-anim/examples/target.html) |
121122
| playScale | number / array | `0.5` | percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter |
122123
| onChange | func | null | change callback({ mode, scrollName }); mode: `enter` or `leave` |
123124
| location | string | null | v0.6.0 above have,location, the parent id; |

‎examples/target.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/target.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// use jsx to render html, do not modify simple.html
2+
3+
import 'rc-scroll-anim/assets/index.less';
4+
import ScrollAnim from 'rc-scroll-anim';
5+
import React from 'react';
6+
import ReactDOM from 'react-dom';
7+
import QueueAnim from 'rc-queue-anim';
8+
import TweenOne from 'rc-tween-one';
9+
const _package = require('../package.json');
10+
const ScrollOverPack = ScrollAnim.OverPack;
11+
12+
class Demo extends React.Component {
13+
constructor() {
14+
super(...arguments);
15+
}
16+
17+
render() {
18+
return (<div style={{ height: '100vh', overflow: 'scroll' }} id="box">
19+
<div className="pack-page page0">
20+
<QueueAnim className="home-title">
21+
<div className="page-title" key="title">
22+
<p>{_package.name}@{_package.version}</p>
23+
</div>
24+
<div className="page-description" key="c">
25+
<p>The simple demo</p>
26+
</div>
27+
</QueueAnim>
28+
</div>
29+
<ScrollOverPack
30+
id="page1"
31+
className="page1"
32+
replay
33+
targetId="box"
34+
>
35+
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
36+
默认进入与出场, 顶部出场
37+
</TweenOne>
38+
<QueueAnim key="1">
39+
<div key="0" className="demo"></div>
40+
<div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
41+
<div key="2" className="demo"></div>
42+
<div key="3" className="demo"></div>
43+
</QueueAnim>
44+
</ScrollOverPack>
45+
46+
<ScrollOverPack
47+
id="page4"
48+
className="page1"
49+
appear={false}
50+
style={{ backgroundColor: '#0098CE' }}
51+
targetId="box"
52+
>
53+
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
54+
默认出场直接出现
55+
</TweenOne>
56+
<QueueAnim key="1">
57+
<div key="0" className="demo"></div>
58+
<div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
59+
<div key="2" className="demo"></div>
60+
<div key="3" className="demo"></div>
61+
</QueueAnim>
62+
</ScrollOverPack>
63+
64+
</div>);
65+
}
66+
}
67+
68+
ReactDOM.render(<Demo />, document.getElementById('__react-content'));

‎src/EventDispatcher.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function EventDispatcher(target) {
66
this._listFun = {};
77
}
88
EventDispatcher.prototype = {
9-
addEventListener(type, callback) {
9+
addEventListener(type, callback, target) {
1010
const types = type.split('.');
1111
const _type = types[0];
1212
const namespaces = types[1];
@@ -32,14 +32,14 @@ EventDispatcher.prototype = {
3232
if (!this._listFun[_type]) {
3333
this._listFun[_type] = this._listFun[_type] || this.dispatchEvent.bind(this, _type);
3434
if (this._eventTarget.addEventListener) {
35-
this._eventTarget.addEventListener(_type, this._listFun[_type], false);
35+
(target || this._eventTarget).addEventListener(_type, this._listFun[_type], false);
3636
} else if (this._eventTarget.attachEvent) {
37-
this._eventTarget.attachEvent(`on${_type}`, this._listFun[_type]);
37+
(target || this._eventTarget).attachEvent(`on${_type}`, this._listFun[_type]);
3838
}
3939
}
4040
},
4141

42-
removeEventListener(type, callback, force) {
42+
removeEventListener(type, callback, target, force) {
4343
const types = type.split('.');
4444
const _type = types[0];
4545
const namespaces = types[1];
@@ -59,9 +59,9 @@ EventDispatcher.prototype = {
5959
delete this._listeners[_type];
6060
delete this._listFun[_type];
6161
if (this._eventTarget.removeEventListener) {
62-
this._eventTarget.removeEventListener(_type, func);
62+
(target || this._eventTarget).removeEventListener(_type, func);
6363
} else if (this._eventTarget.detachEvent) {
64-
this._eventTarget.detachEvent(`on${_type}`, func);
64+
(target || this._eventTarget).detachEvent(`on${_type}`, func);
6565
}
6666
}
6767
if (!_force) {
@@ -89,7 +89,7 @@ EventDispatcher.prototype = {
8989
}
9090
}
9191
},
92-
removeAllType(type) {
92+
removeAllType(type, target) {
9393
const types = type.split('.');
9494
const _type = types[0];
9595
const namespaces = types[1];
@@ -98,16 +98,16 @@ EventDispatcher.prototype = {
9898
item.n && item.n.match(namespaces)
9999
));
100100
this.recoverLists.forEach(item => {
101-
this.removeEventListener(`${item.t}.${item.n}`, item.c);
101+
this.removeEventListener(`${item.t}.${item.n}`, item.c, target);
102102
});
103103
},
104-
reAllType(type) {
104+
reAllType(type, target) {
105105
const types = type.split('.');
106106
const _type = types[0];
107107
const namespaces = types[1];
108108
this.recoverLists = this.recoverLists.map(item => {
109109
if (item.t === _type && item.n.match(namespaces)) {
110-
this.addEventListener(`${item.t}.${item.n}`, item.c);
110+
this.addEventListener(`${item.t}.${item.n}`, item.c, target);
111111
return null;
112112
}
113113
return item;

‎src/ScrollElement.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ class ScrollElement extends React.Component {
2222
}
2323
const length = EventListener._listeners.scroll ? EventListener._listeners.scroll.length : 0;
2424
this.eventType = `scroll.scrollEvent${date}${length}`;
25-
EventListener.addEventListener(this.eventType, this.scrollEventListener);
25+
this.target = this.props.targetId && document.getElementById(this.props.targetId);
26+
EventListener.addEventListener(this.eventType, this.scrollEventListener, this.target);
2627
}
2728

2829
componentWillReceiveProps(nextProps) {
@@ -33,15 +34,15 @@ class ScrollElement extends React.Component {
3334

3435
componentWillUnmount() {
3536
mapped.unRegister(this.props.id);
36-
EventListener.removeEventListener(this.eventType, this.scrollEventListener);
37+
EventListener.removeEventListener(this.eventType, this.scrollEventListener, this.target);
3738
}
3839

3940
getParam = (e) => {
40-
this.clientHeight = windowHeight();
41-
const scrollTop = currentScrollTop();
42-
// 屏幕缩放时的响应，所以放回这里，这个是pack，只处理子级里面的动画，所以marginTop无关系，所以不需减掉；
41+
this.clientHeight = this.target ? this.target.getBoundingClientRect().height : windowHeight();
42+
const windowScrollTop = this.target ? currentScrollTop() : 0;
43+
const scrollTop = this.target ? this.target.scrollTop : currentScrollTop();
4344
const domRect = this.dom.getBoundingClientRect();
44-
const offsetTop = domRect.top + scrollTop;
45+
const offsetTop = domRect.top + scrollTop + windowScrollTop;
4546
this.elementShowHeight = scrollTop - offsetTop + this.clientHeight;
4647
const playScale = transformArguments(this.props.playScale);
4748
this.playHeight = this.clientHeight * playScale[0];
@@ -63,7 +64,7 @@ class ScrollElement extends React.Component {
6364

6465
render() {
6566
const { ...props } = this.props;
66-
['component', 'playScale', 'location'].forEach(key => delete props[key]);
67+
['component', 'playScale', 'location', 'targetId'].forEach(key => delete props[key]);
6768
return React.createElement(this.props.component, { ...props });
6869
}
6970
}
@@ -74,6 +75,7 @@ ScrollElement.propTypes = {
7475
id: React.PropTypes.string,
7576
onChange: React.PropTypes.func,
7677
location: React.PropTypes.string,
78+
targetId: React.PropTypes.string,
7779
};
7880

7981
ScrollElement.defaultProps = {

‎src/ScrollOverPack.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ class ScrollOverPack extends ScrollElement {
2929
});
3030
}
3131
if (!this.props.always) {
32-
EventListener.removeEventListener(this.eventType, this.scrollEventListener);
32+
EventListener.removeEventListener(this.eventType, this.scrollEventListener, this.target);
3333
}
3434
} else {
3535
const bottomLeave = this.elementShowHeight < this.playHeight;
@@ -55,6 +55,7 @@ class ScrollOverPack extends ScrollElement {
5555
'scrollEvent',
5656
'appear',
5757
'location',
58+
'targetId',
5859
].forEach(key => delete placeholderProps[key]);
5960
let childToRender;
6061
if (!this.oneEnter) {

0 commit comments

Comments
 (0)