我有一个滚动的div,我想有一个事件,当我点击它,它将迫使这个div滚动查看里面的一个元素。 我这样写它的JavasSript:
document.getElementById(chr).scrollIntoView(true);
但这在滚动div本身的同时滚动整个页面。 如何解决这个问题?
我想这样说: MyContainerDiv.getElementById(杆).scrollIntoView(真正的);
我有一个滚动的div,我想有一个事件,当我点击它,它将迫使这个div滚动查看里面的一个元素。 我这样写它的JavasSript:
document.getElementById(chr).scrollIntoView(true);
但这在滚动div本身的同时滚动整个页面。 如何解决这个问题?
我想这样说: MyContainerDiv.getElementById(杆).scrollIntoView(真正的);
当前回答
其他答案都不能解决我的问题。
我摆弄了scrollIntoView参数,并设法找到了一个解决方案。将inline设置为开始并将block设置为最近的位置,以防止父元素(或整个页面)滚动:
document.getElementById(chr).scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start'
});
其他回答
这就是我最终得到的
/** Set parent scroll to show element
* @param element {object} The HTML object to show
* @param parent {object} The HTML object where the element is shown */
var scrollToView = function(element, parent) {
//Algorithm: Accumulate the height of the previous elements and add half the height of the parent
var offsetAccumulator = 0;
parent = $(parent);
parent.children().each(function() {
if(this == element) {
return false; //brake each loop
}
offsetAccumulator += $(this).innerHeight();
});
parent.scrollTop(offsetAccumulator - parent.innerHeight()/2);
}
代码应该是:
var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;
您希望滚动子顶部位置和div顶部位置之间的差值。
使用以下方法访问子元素:
var divElem = document.getElementById('scrolling_div');
var numChildren = divElem.childNodes.length;
等等....
浏览器会自动滚动到一个获得焦点的元素,所以你也可以做它来包装你需要滚动到的元素<a>…</a>然后当你需要滚动时将焦点设置在a上
如果你正在使用jQuery,你可以使用以下命令滚动动画:
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});
动画是可选的:你也可以把上面计算出来的scrollTop值直接放到容器的scrollTop属性中。
您必须找到要滚动到的DIV中元素的位置,并设置scrollTop属性。
divElem.scrollTop = 0;
更新:
向上或向下移动的示例代码
function move_up() {
document.getElementById('divElem').scrollTop += 10;
}
function move_down() {
document.getElementById('divElem').scrollTop -= 10;
}