Scrolling to a element inside a scrollable DIV with pure Javascript

前端 未结 3 875
星月不相逢
星月不相逢 2020-11-29 03:56

I have a div that has overflow: scroll and I have some elements inside the DIV that are hidden. On click of a button on the page, I want to make the DIV scroll

相关标签:
3条回答
  • 2020-11-29 04:24

    Here's a simple pure JavaScript solution that works for a target Number (value for scrollTop), target DOM element, or some special String cases:

    /**
     * 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;
        }
    };
    

    And here are some examples of usage:

    // Scroll to the top
    var scrollableDiv = document.getElementById('scrollable_div');
    scrollToTarget('top', scrollableDiv);
    

    or

    // Scroll to 200px from the top
    var scrollableDiv = document.getElementById('scrollable_div');
    scrollToTarget(200, scrollableDiv);
    

    or

    // Scroll to targetElement
    var scrollableDiv = document.getElementById('scrollable_div');
    var targetElement= document.getElementById('target_element');
    scrollToTarget(targetElement, scrollableDiv);
    
    0 讨论(0)
  • 2020-11-29 04:36

    You need to read the offsetTop property of the div you need to scroll to and then set that offset to the scrollTop property of the container div. Bind this function the event you want to :

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

    Fiddle : http://jsfiddle.net/p3kar5bb/322/ (courtesy @rofrischmann)

    0 讨论(0)
  • 2020-11-29 04:42

    Just improved it by setting a smooth auto scrolling inside a list contained in a 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;
    };
    

    I guess it may help someone :)

    0 讨论(0)
提交回复
热议问题