我有一个滚动的div,我想有一个事件,当我点击它,它将迫使这个div滚动查看里面的一个元素。 我这样写它的JavasSript:
document.getElementById(chr).scrollIntoView(true);
但这在滚动div本身的同时滚动整个页面。 如何解决这个问题?
我想这样说: MyContainerDiv.getElementById(杆).scrollIntoView(真正的);
我有一个滚动的div,我想有一个事件,当我点击它,它将迫使这个div滚动查看里面的一个元素。 我这样写它的JavasSript:
document.getElementById(chr).scrollIntoView(true);
但这在滚动div本身的同时滚动整个页面。 如何解决这个问题?
我想这样说: MyContainerDiv.getElementById(杆).scrollIntoView(真正的);
当前回答
您必须找到要滚动到的DIV中元素的位置,并设置scrollTop属性。
divElem.scrollTop = 0;
更新:
向上或向下移动的示例代码
function move_up() {
document.getElementById('divElem').scrollTop += 10;
}
function move_down() {
document.getElementById('divElem').scrollTop -= 10;
}
其他回答
代码应该是:
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;
等等....
我需要滚动页面上的动态加载元素,所以我的解决方案有点复杂。
这将适用于静态元素,这些静态元素不是惰性加载数据,也不是动态加载数据。
const smoothScrollElement = async (selector: string, scrollBy = 12, prevCurrPos = 0) => {
const wait = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout));
const el = document.querySelector(selector) as HTMLElement;
let positionToScrollTo = el.scrollHeight;
let currentPosition = Math.floor(el.scrollTop) || 0;
let pageYOffset = (el.clientHeight + currentPosition);
if (positionToScrollTo == pageYOffset) {
await wait(1000);
}
if ((prevCurrPos > 0 && currentPosition <= prevCurrPos) !== true) {
setTimeout(async () => {
el.scrollBy(0, scrollBy);
await smoothScrollElement(selector, scrollBy, currentPosition);
}, scrollBy);
}
};
另一个使用jQuery和动画的例子。
var container = $('#container');
var element = $('#element');
container.animate({
scrollTop: container.scrollTop = container.scrollTop() + element.offset().top - container.offset().top
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function (e) {
console.log("animation completed");
}
});
假设有一个div元素需要在里面滚动,试试这段代码
document.querySelector (div) .scroll (x, y)
这与我在一个带滚动的div中工作,这应该与你一起工作,以防你将鼠标指向这个元素,然后试图向下或向上滚动。如果它手动工作,它也应该工作
其他答案都不能解决我的问题。
我摆弄了scrollIntoView参数,并设法找到了一个解决方案。将inline设置为开始并将block设置为最近的位置,以防止父元素(或整个页面)滚动:
document.getElementById(chr).scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start'
});