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

Posted 2023-03-10

【中文标题】使用纯 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);