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

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

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

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


当前回答

这是一个简单的纯JavaScript解决方案,适用于目标数字(值为scrollTop),目标DOM元素,或一些特殊的字符串情况:

/**
 * target - target to scroll to (DOM element, scrollTop Number, 'top', or 'bottom'
 * containerEl - DOM element for the container with scrollbars
 */
var scrollToTarget = function(target, containerEl) {
    // Moved up here for readability:
    var isElement = target && target.nodeType === 1,
        isNumber = Object.prototype.toString.call(target) === '[object Number]';

    if (isElement) {
        containerEl.scrollTop = target.offsetTop;
    } else if (isNumber) {
        containerEl.scrollTop = target;
    } else if (target === 'bottom') {
        containerEl.scrollTop = containerEl.scrollHeight - containerEl.offsetHeight;
    } else if (target === 'top') {
        containerEl.scrollTop = 0;
    }
};

下面是一些用法的例子:

// Scroll to the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget('top', scrollableDiv);

or

// Scroll to 200px from the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget(200, scrollableDiv);

or

// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);

其他回答

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

divElem.scrollTop = 0;

更新:

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

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

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

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

代码应该是:

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;

等等....

其他答案都不能解决我的问题。

我摆弄了scrollIntoView参数,并设法找到了一个解决方案。将inline设置为开始并将block设置为最近的位置,以防止父元素(或整个页面)滚动:

document.getElementById(chr).scrollIntoView({
   behavior: 'smooth',
   block: 'nearest',
   inline: 'start'
});

假设有一个div元素需要在里面滚动,试试这段代码

document.querySelector (div) .scroll (x, y)

这与我在一个带滚动的div中工作,这应该与你一起工作,以防你将鼠标指向这个元素,然后试图向下或向上滚动。如果它手动工作,它也应该工作