我编写了一种方法,该方法将容器滚动到其中的一个元素,但将元素保留在视图的中间。看起来像这样:
// Function for scrolling to an element, and placing it in the middle of the view
// By default, the container parameter is set to the browser window
function scrollIntoViewMiddle(element, container) {
if (container === undefined) {
container = window;
}
var elementRect = element.getBoundingClientRect();
var absoluteElementTop = elementRect.top;
var middleDiff = (elementRect.height / 2);
var scrollTopOfElement = absoluteElementTop + middleDiff;
var scrollY = scrollTopOfElement - (window.innerHeight / 2);
container.scrollTo(0, scrollY);
}
这适用于大多数浏览器,甚至某些旧的FF浏览器。但是,在Internet Explorer 11上,标题出现错误,即scrollTo()
不是已定义的函数。 IE11可以替代此功能吗?感谢您的回答。
同意l-portet,由于the scrollTo method doesn't support IE browser,我们可以设置Element.scrollLeft属性和Element.scrollTop属性来达到相同的效果。
此外,该问题还与以下代码有关:
var scrollY = scrollTopOfElement - (window.innerHeight / 2);
我认为您希望基于目标元素和容器元素而不是window元素来获取scrollY。因此,请尝试如下修改您的代码:
function scrollIntoViewMiddle(element, container) {
if (container === undefined) {
container = window;
}
var elementRect = element.getBoundingClientRect();
var absoluteElementTop = elementRect.top;
var middleDiff = (elementRect.height / 2);
var scrollTopOfElement = absoluteElementTop + middleDiff;
var scrollY = (scrollTopOfElement - (container.getBoundingClientRect().height / 2));
//container.scrollTo(0, scrollY);
container.scrollLeft = 0;
container.scrollTop = scrollY;
}
更多详细示例代码,请检查this sample。
此外,这是另一个解决方法,它使用JQuery动画和scrollto,您可以引用它。
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
jQuery(document).on('click', '#scroll_button', function (e) {
var el = $("#scroll_test");
var elOffset = el.offset().top;
var elHeight = el.outerHeight();
var frameHeight = $("#editor").outerHeight();
var offset;
if (elHeight < frameHeight) {
offset = elOffset - ((frameHeight / 2) - (elHeight / 2));
}
else {
offset = elOffset;
}
jQuery('#editor').animate({
scrollTop: offset
}, 1000);
});
});
</script>
<style>
#editor {
height: 100px;
overflow: auto;
}
#scroll_test {
background-color: grey;
}
</style>
<div id="editor" placeholder="Enter text ..." contenteditable="true" autofocus>
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<div id="scroll_test">
test
</div>
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
<span>content</span><br />
</div>
<button id="scroll_button">
Scroll
</button>
结果如下: