如何滚动到div内的元素？
我有一个滚动的div ，我想要有一个链接，当我点击它会强制这个div滚动查看里面的元素。 我这样写了JavasSript：
document.getElementById(chr).scrollIntoView(true);
但是这滚动所有的页面滚动div本身。 如何解决这个问题？
我想这样说
MyContainerDiv.getElementById(chr).scrollIntoView(true);
您需要获取要滚动到视图中的元素相对于其父元素（滚动div容器）的顶部偏移量：
var myElement = document.getElementById('element_within_div'); var topPos = myElement.offsetTop;
现在将variablestopPos设置为滚动div的顶部和希望可见的元素之间的距离（以像素为单位）。
现在我们告诉div使用scrollTop滚动到那个位置：
document.getElementById('scrolling_div').scrollTop = topPos;
如果你使用的是原型JS框架，你可以做同样的事情：
var posArray = $('element_within_div').positionedOffset(); $('scrolling_div').scrollTop = posArray[1];
再一次，这将滚动div，以便您希望看到的元素正好在顶部（或者如果这是不可能的，滚动尽可能远，因此它是可见的）。
您将不得不在要滚动的DIV中find元素的位置，并设置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;
等等….
如果你正在使用jQuery，你可以使用下面的animation来滚动：
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});
animation是可选的：您也可以将上面计算的scrollTop值直接放在容器的scrollTop属性中。
要将元素滚动到div的视图中，只有在需要时才可以使用此scrollIfNeeded函数：
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; }
<div id="container" class="scrollContainer"> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> <div id="goose" class="box">goose</div> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> <div class="box">duck</div> </div> <button id="btn">scroll to goose</button>
用户animation滚动
下面是一个如何在没有 JQuery的 情况下水平滚动<div>的例子。 要垂直滚动，您可以用scrollTop代替JavaScript的写入到scrollLeft 。
的jsfiddle
https://jsfiddle.net/fNPvf/38536/
HTML
<!-- Left Button. --> <div style="float:left;"> <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. --> <input type="button" value="«" style="height: 100px;" onmousedown="scroll('scroller',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/> </div> <!-- Contents to scroll. --> <div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;"> <!-- <3 --> <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" /> </div> <!-- Right Button. --> <div style="float:left;"> <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) --> <input type="button" value="»" style="height: 100px;" onmousedown="scroll('scroller',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/> </div>
JavaScript的
// Declare the Shared Timer. var TIMER_SCROLL; /** Scroll function. @param id Unique id of element to scroll. @param d Amount of pixels to scroll per sleep. @param del Size of the sleep (ms).*/ function scroll(id, d, del){ // Scroll the element. document.getElementById(id).scrollLeft += d; // Perform a delay before recursing this function again. TIMER_SCROLL = setTimeout("scroll('"+id+"',"+d+", "+del+");", del); }
信用Dux 。
自动animation滚动
另外，这里还有一个完全向左右滚动<div>函数。 我们在这里唯一改变的是我们检查滚动的完整扩展是否已经被使用，然后再次recursion调用。
的jsfiddle
https://jsfiddle.net/0nLc2fhh/1/
HTML
<!-- Left Button. --> <div style="float:left;"> <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. --> <input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft('scroller',3, 10);"/> </div> <!-- Contents to scroll. --> <div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;"> <!-- <3 --> <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" /> </div> <!-- Right Button. --> <div style="float:left;"> <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) --> <input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight('scroller',3, 10);"/> </div>
JavaScript的
// Declare the Shared Timer. var TIMER_SCROLL; /** Scroll fully left function; completely scrolls a <div> to the left, as far as it will go. @param id Unique id of element to scroll. @param d Amount of pixels to scroll per sleep. @param del Size of the sleep (ms).*/ function scrollFullyLeft(id, d, del){ // Fetch the element. var el = document.getElementById(id); // Scroll the element. el.scrollLeft += d; // Have we not finished scrolling yet? if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) { TIMER_SCROLL = setTimeout("scrollFullyLeft('"+id+"',"+d+", "+del+");", del); } } /** Scroll fully right function; completely scrolls a <div> to the right, as far as it will go. @param id Unique id of element to scroll. @param d Amount of pixels to scroll per sleep. @param del Size of the sleep (ms).*/ function scrollFullyRight(id, d, del){ // Fetch the element. var el = document.getElementById(id); // Scroll the element. el.scrollLeft -= d; // Have we not finished scrolling yet? if(el.scrollLeft > 0) { TIMER_SCROLL = setTimeout("scrollFullyRight('"+id+"',"+d+", "+del+");", del); } }
