Skip to content

Commit

Permalink
support offset
Browse files Browse the repository at this point in the history
  • Loading branch information
@yiminghe
yiminghe committed Mar 22, 2016
1 parent f072fd9 commit 3898977
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 28 deletions.
6 changes: 6 additions & 0 deletions HISTORY.md
View file
@@ -0,0 +1,6 @@
# History
----

## 1.2.0 / 2016-03-22

- support offsetTop/Left/Bottom/Right
24 changes: 24 additions & 0 deletions README.md
View file
Expand Up @@ -79,6 +79,30 @@ online example: http://yiminghe.github.io/dom-scroll-into-view/
<td></td>
<td>whether align with top edge</td>
</tr>
<tr>
<td>config.offsetTop</td>
<td>Number</td>
<td></td>
<td></td>
</tr>
<tr>
<td>config.offsetLeft</td>
<td>Number</td>
<td></td>
<td></td>
</tr>
<tr>
<td>config.offsetBottom</td>
<td>Number</td>
<td></td>
<td></td>
</tr>
<tr>
<td>config.offsetRight</td>
<td>Number</td>
<td></td>
<td></td>
</tr>
<tr>
<td>config.allowHorizontalScroll</td>
<td>Boolean</td>
Expand Down
15 changes: 12 additions & 3 deletions examples/demo.js
View file
Expand Up @@ -41,11 +41,18 @@ $('#__react-content').html(`
offsetTop:
<input value="0" id="offsetTop" />
</label><br/>
<label>
offsetBottom:
<input value="0" id="offsetBottom" />
</label><br/>
<label>
offsetLeft:
<input value="0" id="offsetLeft" />
</label><br/>
<label>
offsetRight:
<input value="0" id="offsetRight" />
</label><br/>
<div id="container" class="demo-container">
<div id="ex1" class="demo-box">
find me!
Expand All @@ -71,7 +78,9 @@ $('#scrollIntoView')[0].onclick = () => {
alignWithTop: transformValue($('#alignWithTop').val()),
allowHorizontalScroll: transformValue($('#allowHorizontalScroll').val()),
onlyScrollIfNeeded: transformValue($('#onlyScrollIfNeeded').val()),
offsetTop: parseInt($('#offsetTop').val()) || 0,
offsetLeft: parseInt($('#offsetLeft').val()) || 0,
offsetTop: parseInt($('#offsetTop').val(), 10) || 0,
offsetLeft: parseInt($('#offsetLeft').val(), 10) || 0,
offsetBottom: parseInt($('#offsetBottom').val(), 10) || 0,
offsetRight: parseInt($('#offsetRight').val(), 10) || 0,
});
};
2 changes: 1 addition & 1 deletion examples/demo.less
View file
Expand Up @@ -11,7 +11,7 @@
width: 60px;
border: 1px solid red;
position: absolute;
left: 10px;
left: 100px;
top: 200px;
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "dom-scroll-into-view",
"version": "1.1.0",
"version": "1.2.0",
"description": "scroll dom node into view automatically",
"keywords": [
"dom",
Expand Down
46 changes: 24 additions & 22 deletions src/dom-scroll-into-view.js
View file
Expand Up @@ -11,8 +11,10 @@ function scrollIntoView(elem, container, config) {
const onlyScrollIfNeeded = config.onlyScrollIfNeeded;
let alignWithTop = config.alignWithTop;
let alignWithLeft = config.alignWithLeft;
let offsetTop = config.offsetTop || 0;
let offsetLeft = config.offsetLeft || 0;
const offsetTop = config.offsetTop || 0;
const offsetLeft = config.offsetLeft || 0;
const offsetBottom = config.offsetBottom || 0;
const offsetRight = config.offsetRight || 0;

allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll;

Expand Down Expand Up @@ -41,12 +43,12 @@ function scrollIntoView(elem, container, config) {
};
// elem 相对 container 可视视窗的距离
diffTop = {
left: elemOffset.left - winScroll.left,
top: elemOffset.top - winScroll.top,
left: elemOffset.left - winScroll.left - offsetLeft,
top: elemOffset.top - winScroll.top - offsetTop,
};
diffBottom = {
left: elemOffset.left + ew - (winScroll.left + ww),
top: elemOffset.top + eh - (winScroll.top + wh),
left: elemOffset.left + ew - (winScroll.left + ww) + offsetRight,
top: elemOffset.top + eh - (winScroll.top + wh) + offsetBottom,
};
containerScroll = winScroll;
} else {
Expand All @@ -61,41 +63,41 @@ function scrollIntoView(elem, container, config) {
// 注意边框, offset 是边框到根节点
diffTop = {
left: elemOffset.left - (containerOffset.left +
(parseFloat(util.css(container, 'borderLeftWidth')) || 0)),
(parseFloat(util.css(container, 'borderLeftWidth')) || 0)) - offsetLeft,
top: elemOffset.top - (containerOffset.top +
(parseFloat(util.css(container, 'borderTopWidth')) || 0)),
(parseFloat(util.css(container, 'borderTopWidth')) || 0)) - offsetTop,
};
diffBottom = {
left: elemOffset.left + ew -
(containerOffset.left + cw +
(parseFloat(util.css(container, 'borderRightWidth')) || 0)),
(parseFloat(util.css(container, 'borderRightWidth')) || 0)) + offsetRight,
top: elemOffset.top + eh -
(containerOffset.top + ch +
(parseFloat(util.css(container, 'borderBottomWidth')) || 0)),
(parseFloat(util.css(container, 'borderBottomWidth')) || 0)) + offsetBottom,
};
}

if (diffTop.top < 0 || diffBottom.top > 0) {
// 强制向上
if (alignWithTop === true) {
util.scrollTop(container, containerScroll.top + diffTop.top - offsetTop);
util.scrollTop(container, containerScroll.top + diffTop.top);
} else if (alignWithTop === false) {
util.scrollTop(container, containerScroll.top + diffBottom.top - offsetTop);
util.scrollTop(container, containerScroll.top + diffBottom.top);
} else {
// 自动调整
if (diffTop.top < 0) {
util.scrollTop(container, containerScroll.top + diffTop.top - offsetTop);
util.scrollTop(container, containerScroll.top + diffTop.top);
} else {
util.scrollTop(container, containerScroll.top + diffBottom.top - offsetTop);
util.scrollTop(container, containerScroll.top + diffBottom.top);
}
}
} else {
if (!onlyScrollIfNeeded) {
alignWithTop = alignWithTop === undefined ? true : !!alignWithTop;
if (alignWithTop) {
util.scrollTop(container, containerScroll.top + diffTop.top - offsetTop);
util.scrollTop(container, containerScroll.top + diffTop.top);
} else {
util.scrollTop(container, containerScroll.top + diffBottom.top - offsetTop);
util.scrollTop(container, containerScroll.top + diffBottom.top);
}
}
}
Expand All @@ -104,24 +106,24 @@ function scrollIntoView(elem, container, config) {
if (diffTop.left < 0 || diffBottom.left > 0) {
// 强制向上
if (alignWithLeft === true) {
util.scrollLeft(container, containerScroll.left + diffTop.left - offsetLeft);
util.scrollLeft(container, containerScroll.left + diffTop.left);
} else if (alignWithLeft === false) {
util.scrollLeft(container, containerScroll.left + diffBottom.left - offsetLeft);
util.scrollLeft(container, containerScroll.left + diffBottom.left);
} else {
// 自动调整
if (diffTop.left < 0) {
util.scrollLeft(container, containerScroll.left + diffTop.left - offsetLeft);
util.scrollLeft(container, containerScroll.left + diffTop.left);
} else {
util.scrollLeft(container, containerScroll.left + diffBottom.left - offsetLeft);
util.scrollLeft(container, containerScroll.left + diffBottom.left);
}
}
} else {
if (!onlyScrollIfNeeded) {
alignWithLeft = alignWithLeft === undefined ? true : !!alignWithLeft;
if (alignWithLeft) {
util.scrollLeft(container, containerScroll.left + diffTop.left - offsetLeft);
util.scrollLeft(container, containerScroll.left + diffTop.left);
} else {
util.scrollLeft(container, containerScroll.left + diffBottom.left - offsetLeft);
util.scrollLeft(container, containerScroll.left + diffBottom.left);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/util.js
View file
Expand Up @@ -332,7 +332,7 @@ function css(el, name, v) {

each(['width', 'height'], (name) => {
const first = name.charAt(0).toUpperCase() + name.slice(1);
domUtils[`outer${first}`] = function (el, includeMargin) {
domUtils[`outer${first}`] = (el, includeMargin) => {
return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX);
};
const which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
Expand Down

0 comments on commit 3898977

Please sign in to comment.