我有一个滚动的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'
});

其他回答

您必须找到要滚动到的DIV中元素的位置,并设置scrollTop属性。

divElem.scrollTop = 0;

更新:

向上或向下移动的示例代码

  function move_up() {
    document.getElementById('divElem').scrollTop += 10;
  }

  function move_down() {
    document.getElementById('divElem').scrollTop -= 10;
  }

有两个事实:

1) safari不支持scrollIntoView组件。

2) JS框架jQuery可以做这样的工作:

parent = 'some parent div has css position==="fixed"' || 'html, body';

$(parent).animate({scrollTop: $(child).offset().top}, duration)

这就是我最终得到的

/** 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);
}

你需要获得你想要滚动到视图中的元素的顶部偏移量,相对于它的父元素(滚动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,以便您希望看到的元素恰好位于顶部(如果不可能,则尽可能向下滚动,使其可见)。

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