我有一个滚动的div,我想有一个事件,当我点击它,它将迫使这个div滚动查看里面的一个元素。 我这样写它的JavasSript:
document.getElementById(chr).scrollIntoView(true);
但这在滚动div本身的同时滚动整个页面。 如何解决这个问题?
我想这样说: MyContainerDiv.getElementById(杆).scrollIntoView(真正的);
我有一个滚动的div,我想有一个事件,当我点击它,它将迫使这个div滚动查看里面的一个元素。 我这样写它的JavasSript:
document.getElementById(chr).scrollIntoView(true);
但这在滚动div本身的同时滚动整个页面。 如何解决这个问题?
我想这样说: MyContainerDiv.getElementById(杆).scrollIntoView(真正的);
当前回答
如果你正在使用jQuery,你可以使用以下命令滚动动画:
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});
动画是可选的:你也可以把上面计算出来的scrollTop值直接放到容器的scrollTop属性中。
其他回答
其他答案都不能解决我的问题。
我摆弄了scrollIntoView参数,并设法找到了一个解决方案。将inline设置为开始并将block设置为最近的位置,以防止父元素(或整个页面)滚动:
document.getElementById(chr).scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start'
});
代码应该是:
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;
等等....
原生JS,跨浏览器,平滑滚动(更新2020)
设置ScrollTop确实可以得到想要的结果,但是滚动非常突然。使用jquery来平滑滚动不是一个选择。因此,这里有一种支持所有主流浏览器的本机方式来完成工作。参比犬
// get the "Div" inside which you wish to scroll (i.e. the container element)
const El = document.getElementById('xyz');
// Lets say you wish to scroll by 100px,
El.scrollTo({top: 100, behavior: 'smooth'});
// If you wish to scroll until the end of the container
El.scrollTo({top: El.scrollHeight, behavior: 'smooth'});
就是这样!
And here's a working snippet for the doubtful - document.getElementById('btn').addEventListener('click', e => { e.preventDefault(); // smooth scroll document.getElementById('container').scrollTo({top: 175, behavior: 'smooth'}); }); /* just some styling for you to ignore */ .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; } <!-- Dummy html to be ignored --> <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">goose</button>
更新:正如你在评论中看到的,IE11似乎不支持Element.scrollTo()。所以如果你不关心IE11(你真的不应该,微软将在2022年6月退休IE11),请在你所有的项目中使用它。注意,支持Edge!所以你并没有真正离开你的Edge/Windows用户;)
参考
浏览器会自动滚动到一个获得焦点的元素,所以你也可以做它来包装你需要滚动到的元素<a>…</a>然后当你需要滚动时将焦点设置在a上
假设有一个div元素需要在里面滚动,试试这段代码
document.querySelector (div) .scroll (x, y)
这与我在一个带滚动的div中工作,这应该与你一起工作,以防你将鼠标指向这个元素,然后试图向下或向上滚动。如果它手动工作,它也应该工作