如何滚动到div内的元素？

我有一个滚动div,我希望有一个链接,当我点击它将强制它div滚动查看里面的元素.我写了这样的JavasSript:

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

但这会在滚动div自己的同时滚动所有页面.如何解决？

我想这样说

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

小智.. 299

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

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

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

现在我们告诉div使用scrollTop以下方式滚动到该位置:

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

如果您正在使用原型JS框架,那么您将执行以下相同的操作:

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

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

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

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

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

现在我们告诉div使用scrollTop以下方式滚动到该位置:

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

如果您正在使用原型JS框架,那么您将执行以下相同的操作:

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

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

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

divElem.scrollTop = 0;

更新:

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

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

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

var box = document.querySelector('.box'),
    targetElm = document.querySelector('.boxChild'); // <-- Scroll to here within ".box"

document.querySelector('button').addEventListener('click', function(){
   scrollToElm( box, targetElm , 600 );   
});


/////////////

function scrollToElm(container, elm, duration){
  var pos = getRelativePos(elm);
  scrollTo( container, pos.top , 2);  // duration in seconds
}

function getRelativePos(elm){
  var pPos = elm.parentNode.getBoundingClientRect(), // parent pos
      cPos = elm.getBoundingClientRect(), // target pos
      pos = {};

  pos.top    = cPos.top    - pPos.top + elm.parentNode.scrollTop,
  pos.right  = cPos.right  - pPos.right,
  pos.bottom = cPos.bottom - pPos.bottom,
  pos.left   = cPos.left   - pPos.left;

  return pos;
}
    
function scrollTo(element, to, duration, onDone) {
    var start = element.scrollTop,
        change = to - start,
        startTime = performance.now(),
        val, now, elapsed, t;

    function animateScroll(){
        now = performance.now();
        elapsed = (now - startTime)/1000;
        t = (elapsed/duration);

        element.scrollTop = start + change * easeInOutQuad(t);

        if( t < 1 )
            window.requestAnimationFrame(animateScroll);
        else
            onDone && onDone();
    };

    animateScroll();
}

function easeInOutQuad(t){ return t<.5 ? 2*t*t : -1+(4-2*t)*t };

.box{ width:80%; border:2px dashed; height:180px; overflow:auto; }
.boxChild{ 
  margin:600px 0 300px; 
  width: 40px;
  height:40px;
  background:green;
}

Scroll to element

  

var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;

var divElem = document.getElementById('scrolling_div'); 
var numChildren = divElem.childNodes.length;

function scrollIfNeeded(element, container) {
  if (element.offsetTop < container.scrollTop) {
    container.scrollTop = element.offsetTop;
  } else {
    const offsetBottom = element.offsetTop + element.offsetHeight;
    const scrollBottom = container.scrollTop + container.offsetHeight;
    if (offsetBottom > scrollBottom) {
      container.scrollTop = offsetBottom - container.offsetHeight;
    }
  }
}

document.getElementById('btn').addEventListener('click', ev => {
  ev.preventDefault();
  scrollIfNeeded(document.getElementById('goose'), document.getElementById('container'));
});

.scrollContainer {
  overflow-y: auto;
  max-height: 100px;
  position: relative;
  border: 1px solid red;
  width: 120px;
}

body {
  padding: 10px;
}

.box {
  margin: 5px;
  background-color: yellow;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#goose {
  background-color: lime;
}

  
duck
  
duck
  
duck
  
duck
  
duck
  
duck
  
duck
  
duck
  
goose
  
duck
  
duck
  
duck
  
duck


scroll to goose

$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});