我有一个滚动的div,我想有一个事件,当我点击它,它将迫使这个div滚动查看里面的一个元素。 我这样写它的JavasSript:

document.getElementById(chr).scrollIntoView(true);

但这在滚动div本身的同时滚动整个页面。 如何解决这个问题?

我想这样说: MyContainerDiv.getElementById(杆).scrollIntoView(真正的);


当前回答

另一个使用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中工作,这应该与你一起工作,以防你将鼠标指向这个元素,然后试图向下或向上滚动。如果它手动工作,它也应该工作

另一个使用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");
    }
});

代码应该是:

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;

等等....

你需要获得你想要滚动到视图中的元素的顶部偏移量,相对于它的父元素(滚动div容器):

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

变量topPos现在被设置为滚动div的顶部与您希望可见的元素之间的距离(以像素为单位)。

现在我们使用scrollTop命令让div滚动到那个位置:

document.getElementById('scrolling_div').scrollTop = topPos;

如果你正在使用原型JS框架,你会做同样的事情:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

同样,这将滚动div,以便您希望看到的元素恰好位于顶部(如果不可能,则尽可能向下滚动,使其可见)。

浏览器会自动滚动到一个获得焦点的元素,所以你也可以做它来包装你需要滚动到的元素<a>…</a>然后当你需要滚动时将焦点设置在a上