Question

我有一个overflow: scroll的div，我在DIV中有一些隐藏的元素。单击页面上的按钮，我想让DIV滚动到DIV中的特定元素。

我如何实现这一目标？

Answer 1

您需要阅读需要滚动到的div的offsetTop属性，然后将该偏移设置为容器scrollTop的{{1}}属性。将此功能绑定到您想要的事件：

＆＃13;

div

＆＃13;

function scrollToElementD(){
    var topPos = document.getElementById('inner-element').offsetTop;
    document.getElementById('container').scrollTop = topPos-10;
}

＆＃13;

div {
    height: 200px;
    width: 100px;
    border: 1px solid black;
    overflow: auto;
}

p {
    height: 80px;
    background: blue;
}
#inner-element {
    background: red;
}

＆＃13;

<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>

小提琴：http://jsfiddle.net/p3kar5bb/322/（@rofrischmann提供）

Answer 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;
};

我想这可能有助于某人：）

Answer 3

这是一个简单的纯JavaScript解决方案，适用于目标Number（/** * 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; } };的值），目标DOM元素或一些特殊字符串案例：

// 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);

或

3 products

使用纯Javascript滚动到可滚动DIV内的元素

3 个答案: