使用纯 Javascript 滚动到可滚动 DIV 中的元素
Scrolling to a element inside a scrollable DIV with pure Javascript
我有一个overflow: scroll
的div,我在DIV中隐藏了一些元素。单击页面上的按钮时,我想使 DIV 滚动到 DIV 中的特定元素。
我如何实现这一点?
您需要读取需要滚动到的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提供)
只是通过在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;
};
我想它可能会帮助某人:)
这是一个简单的纯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);
您需要一个指向您希望滚动到inner-div
的div 的引用和一个对可滚动div scrollable-div
的引用:
const scrollToDiv = () => {
const innerDivPos = document.getElementById('inner-div').offsetTop
document
.getElementById('scrollable-div')
.scrollTo({ top: innerDivPos, behavior: 'smooth' })
}
<div id="scrollable-div" style="height:100px; overflow-y:auto;">
<button type="button" style="margin-bottom:500px" onclick="scrollToDiv()">Scroll To Div</button>
<div id="inner-div">Inner Div</div>
</div>
相关文章:
- 如何确定滚动DIV中的可见DOM元素
- 如何获取滚动DIV中的当前活动文本
- 如何在没有滚动条的情况下滚动Div
- 使用纯 Javascript 滚动到可滚动 DIV 中的元素
- 滚动 DIV 元素的特定滚动条
- 鼠标滚轮滚动 DIV 元素
- 使用按钮和鼠标滚动 DIV
- 通过按钮可滚动 Div,没有滚动条
- jQuery滚动DIV是跳跃和定位错误
- 检查元素是否在溢出滚动DIV中完全可见
- 当我们滚动&Div来到Windows中间位置
- 加载数据时动态向下滚动DIV层
- CSS/JS -禁用点击事件,但允许滚动DIV
- 使用Javascript + Input type=range滚动Div
- 从任何地方滚动Div
- HTML / JS水平滚动DIV列表
- jQuery滚动Div高度
- 如何在没有Jquery的情况下将HTML5视频快照附加到滚动DIV
- 在RTL模式下获得可滚动DIV的视图的更好方法
- 暂停自动滚动Div