使用纯 Javascript 滚动到可滚动 DIV 内的元素
Posted
技术标签:
【中文标题】使用纯 Javascript 滚动到可滚动 DIV 内的元素【英文标题】:Scrolling to a element inside a scrollable DIV with pure Javascript 【发布时间】:2015-03-14 19:53:56 【问题描述】:我有一个包含overflow: scroll
的 div,并且我在 DIV 中有一些隐藏的元素。单击页面上的按钮时,我想让 DIV 滚动到 DIV 内的特定元素。
我如何做到这一点?
【问题讨论】:
请附上代码 sn-p。它有助于更快地解决您的查询。 How to scroll to an element inside a div? 的可能重复项 这是您的问题jsfiddle.net/gyz0Lyh2/1 ###这解决了我的问题:### [***.com/questions/2905867/… [1]: ***.com/questions/2905867/… *简直太聪明了! * 【参考方案1】:您需要读取需要滚动到的 div 的 offsetTop
属性,然后将该偏移量设置为容器 div
的 scrollTop
属性。将此函数绑定到你想要的事件:
function scrollToElementD()
var topPos = document.getElementById('inner-element').offsetTop;
document.getElementById('container').scrollTop = topPos-10;
div
height: 200px;
width: 100px;
border: 1px solid black;
overflow: auto;
p
height: 80px;
background: blue;
#inner-element
background: red;
<div id="container"><p>A</p><p>B</p><p>C</p><p id="inner-element">D</p><p>E</p><p>F</p></div>
<button onclick="scrollToElementD()">SCROLL TO D</button>
function scrollToElementD()
var topPos = document.getElementById('inner-element').offsetTop;
document.getElementById('container').scrollTop = topPos-10;
小提琴:http://jsfiddle.net/p3kar5bb/322/(@rofrischmann 提供)
【讨论】:
@JoãoPaiva 看起来好像scrollTo()
是作为内置函数添加的。只需将 scrollTo()
重命名为其他名称即可。我会更新答案和小提琴。
为什么是topPos - 10
?为什么是 10 个?
@Sumit 只是一个随机值,与屏幕顶部留出一点空隙。【参考方案2】:
只是通过在 div 中包含的列表中设置平滑的自动滚动来改进它
https://codepen.io/rebosante/pen/eENYBv
var topPos = elem.offsetTop
document.getElementById('mybutton').onclick = function ()
console.log('click')
scrollTo(document.getElementById('container'), topPos-10, 600);
function scrollTo(element, to, duration)
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 20;
var animateScroll = function()
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if(currentTime < duration)
setTimeout(animateScroll, increment);
;
animateScroll();
//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d)
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
;
我想这可能对某人有帮助:)
【讨论】:
【参考方案3】:这是一个简单的纯 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);
或
// Scroll to 200px from the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget(200, scrollableDiv);
或
// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);
【讨论】:
以上是关于使用纯 Javascript 滚动到可滚动 DIV 内的元素的主要内容,如果未能解决你的问题,请参考以下文章