it-swarm.com.de

Wie scrolle ich zu einem Element innerhalb eines div?

Ich habe eine gescrollte div und ich möchte einen Link haben, wenn ich darauf klicke, wird diese div zum Scrollen gezwungen, um ein Element darin anzuzeigen. 

document.getElementById(chr).scrollIntoView(true);

dies führt jedoch zum Scrollen der gesamten Seite, während die div selbst gescrollt wird. Wie kann man das beheben?

Ich möchte es so sagen

MyContainerDiv.getElementById(chr).scrollIntoView(true);
109
Amr Elgarhy

Sie müssen den oberen Versatz des Elements ermitteln, das Sie relativ zu seinem übergeordneten Element (dem scrollenden div-Container) in die Ansicht scrollen möchten:

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

Die Variable topPos ist jetzt auf den Abstand zwischen dem oberen Teil des Scrolldivs und dem Element eingestellt, das sichtbar sein soll (in Pixel).

Nun sagen wir dem div, dass es mit scrollTop zu dieser Position scrollen soll:

document.getElementById('scrolling_div').scrollTop = topPos;

Wenn Sie das Prototyp-JS-Framework verwenden, gehen Sie wie folgt vor:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

Auch hier wird das div so verschoben, dass sich das Element, das Sie sehen möchten, genau oben befindet (oder, wenn dies nicht möglich ist, so weit wie möglich nach unten gescrollt wird, damit es sichtbar ist).

271
Brian Barrett

Sie müssten die Position des Elements in der DIV finden, zu der Sie scrollen möchten, und die scrollTop-Eigenschaft festlegen.

divElem.scrollTop = 0;

Update:

Beispielcode zum Aufwärts- oder Abwärtsbewegen

  function move_up() {
    document.getElementById('divElem').scrollTop += 10;
  }

  function move_down() {
    document.getElementById('divElem').scrollTop -= 10;
  }
61
Glennular

Methode 1 - Leichtes Scrollen zu einem Element innerhalb eines Elements

var box = document.querySelector('.box'),
    targetElm = document.querySelector('.boxChild'); // <-- Scroll to here within ".box"

document.querySelector('button').addEventListener('click', function(){
   scrollToElm( box, targetElm , 600 );   
});


/////////////

function scrollToElm(container, Elm, duration){
  var pos = getRelativePos(Elm);
  scrollTo( container, pos.top , 2);  // duration in seconds
}

function getRelativePos(Elm){
  var pPos = Elm.parentNode.getBoundingClientRect(), // parent pos
      cPos = Elm.getBoundingClientRect(), // target pos
      pos = {};

  pos.top    = cPos.top    - pPos.top + Elm.parentNode.scrollTop,
  pos.right  = cPos.right  - pPos.right,
  pos.bottom = cPos.bottom - pPos.bottom,
  pos.left   = cPos.left   - pPos.left;

  return pos;
}
    
function scrollTo(element, to, duration, onDone) {
    var start = element.scrollTop,
        change = to - start,
        startTime = performance.now(),
        val, now, elapsed, t;

    function animateScroll(){
        now = performance.now();
        elapsed = (now - startTime)/1000;
        t = (elapsed/duration);

        element.scrollTop = start + change * easeInOutQuad(t);

        if( t < 1 )
            window.requestAnimationFrame(animateScroll);
        else
            onDone && onDone();
    };

    animateScroll();
}

function easeInOutQuad(t){ return t<.5 ? 2*t*t : -1+(4-2*t)*t };
.box{ width:80%; border:2px dashed; height:180px; overflow:auto; }
.boxChild{ 
  margin:600px 0 300px; 
  width: 40px;
  height:40px;
  background:green;
}
<button>Scroll to element</button>
<div class='box'>
  <div class='boxChild'></div>
</div>

Methode 2 - Verwenden von Element.scrollIntoView :

Beachten Sie, dass die Unterstützung von browser für diese nicht geeignet ist

var box = document.querySelector('.box'),
    targetElm = document.querySelector('.boxChild');

document.querySelector('button').addEventListener('click', function(){
   targetElm.scrollIntoView(); 
});
.box {
  width: 80%;
  border: 2px dashed;
  height: 180px;
  overflow: auto;
  scroll-behavior: smooth; /* <-- for smooth scroll */
}

.boxChild {
  margin: 600px 0 300px;
  width: 40px;
  height: 40px;
  background: green;
}
<button>Scroll to element</button>
<div class='box'>
  <div class='boxChild'></div>
</div>

Methode 3 - Verwendung von CSS Scroll-Verhalten :

.box {
  width: 80%;
  border: 2px dashed;
  height: 180px;
  overflow-y: scroll;
  scroll-behavior: smooth; /* <--- */
}

#boxChild {
  margin: 600px 0 300px;
  width: 40px;
  height: 40px;
  background: green;
}
<a href='#boxChild'>Scroll to element</a>
<div class='box'>
  <div id='boxChild'></div>
</div>

16
vsync

Code sollte sein:

var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;

Sie möchten die Differenz zwischen der obersten Position der untergeordneten und der oberen Position von div scrollen. 

Erhalten Sie Zugriff auf untergeordnete Elemente mit:

var divElem = document.getElementById('scrolling_div'); 
var numChildren = divElem.childNodes.length;

und so weiter....

9
pgp

Um ein Element in die Ansicht eines div zu scrollen, können Sie diese scrollIfNeeded-Funktion nur bei Bedarf verwenden:

function scrollIfNeeded(element, container) {
  if (element.offsetTop < container.scrollTop) {
    container.scrollTop = element.offsetTop;
  } else {
    const offsetBottom = element.offsetTop + element.offsetHeight;
    const scrollBottom = container.scrollTop + container.offsetHeight;
    if (offsetBottom > scrollBottom) {
      container.scrollTop = offsetBottom - container.offsetHeight;
    }
  }
}

document.getElementById('btn').addEventListener('click', ev => {
  ev.preventDefault();
  scrollIfNeeded(document.getElementById('goose'), document.getElementById('container'));
});
.scrollContainer {
  overflow-y: auto;
  max-height: 100px;
  position: relative;
  border: 1px solid red;
  width: 120px;
}

body {
  padding: 10px;
}

.box {
  margin: 5px;
  background-color: yellow;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#goose {
  background-color: Lime;
}
<div id="container" class="scrollContainer">
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div id="goose" class="box">goose</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
</div>

<button id="btn">scroll to goose</button>

6
mpen

Wenn Sie jQuery verwenden, können Sie mit einer Animation wie folgt scrollen:

$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});

Die Animation ist optional: Sie können auch den oben berechneten scrollTop-Wert verwenden und direkt in die scrollTop - Eigenschaft des Containers einfügen.

4
dlauzon

Hier ist eine einfache reine JavaScript-Lösung, die für eine Zielnummer (Wert für scrollTop), ein Ziel-DOM-Element oder einige spezielle String-Fälle funktioniert:

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

Und hier sind einige Anwendungsbeispiele:

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

oder

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

oder

// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);
1
NoBrainer

Es gibt zwei Tatsachen:

1) Die Komponente scrollIntoView wird von Safari nicht unterstützt.

2) JS-Framework jQuery erledigt die Aufgabe folgendermaßen:

parent = 'some parent div has css position==="fixed"' || 'html, body';

$(parent).animate({scrollTop: $(child).offset().top}, duration)
1
nickmit

Ein weiteres Beispiel für die Verwendung von jQuery und animate. 

var container = $('#container');
var element = $('#element');

container.animate({
    scrollTop: container.scrollTop = container.scrollTop() + element.offset().top - container.offset().top
}, {
    duration: 1000,
    specialEasing: {
        width: 'linear',
        height: 'easeOutBounce'
    },
    complete: function (e) {
        console.log("animation completed");
    }
});
0
Hopefulee

Das hat mir endlich gedient

/** Set parent scroll to show element
 * @param element {object} The HTML object to show
 * @param parent {object} The HTML object where the element is shown  */
var scrollToView = function(element, parent) {
    //Algorithm: Accumulate the height of the previous elements and add half the height of the parent
    var offsetAccumulator = 0;
    parent = $(parent);
    parent.children().each(function() {
        if(this == element) {
            return false; //brake each loop
        }
        offsetAccumulator += $(this).innerHeight();
    });
    parent.scrollTop(offsetAccumulator - parent.innerHeight()/2);
}
0
Iñigo Panera

der Browser scrollt automatisch zu einem Element, das den Fokus erhält. Was Sie also auch tun können, um das Element, zu dem Sie einen Bildlauf durchführen möchten, in <a>...</a> zu verpacken. Wenn Sie dann einen Bildlauf durchführen müssen, setzen Sie den Fokus auf diese a.

0
Trident D'Gao

Benutzer animiertes Scrollen

Hier ein Beispiel, wie Sie einen <div> horizontal programmieren, ohneJQuery. Um vertikal zu scrollen, würden Sie stattdessen die Schreibweisen von JavaScript in scrollLeft durch scrollTop ersetzen.

JSFiddle

https://jsfiddle.net/fNPvf/38536/

HTML

<!-- Left Button. -->
<div style="float:left;">
    <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
    <input type="button" value="«" style="height: 100px;" onmousedown="scroll('scroller',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
    <!-- <3 -->
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
    <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
    <input type="button" value="»" style="height: 100px;" onmousedown="scroll('scroller',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>

JavaScript

// Declare the Shared Timer.
var TIMER_SCROLL;
/** 
Scroll function. 
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scroll(id, d, del){
    // Scroll the element.
    document.getElementById(id).scrollLeft += d;
    // Perform a delay before recursing this function again.
    TIMER_SCROLL = setTimeout("scroll('"+id+"',"+d+", "+del+");", del);
 }

Gutschrift an Dux .


Auto Animated Scrolling

Außerdem gibt es hier Funktionen, um einen <div> vollständig nach links und rechts zu scrollen. Das einzige, was wir hier ändern, ist, dass wir prüfen, ob die vollständige Erweiterung der Bildlaufleiste verwendet wurde, bevor Sie einen rekursiven Aufruf zum erneuten Bildlauf durchführen.

JSFiddle

https://jsfiddle.net/0nLc2fhh/1/

HTML

<!-- Left Button. -->
<div style="float:left;">
    <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
    <input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft('scroller',3, 10);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
  <!-- <3 -->
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
    <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
    <input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight('scroller',3, 10);"/>
</div>

JavaScript

// Declare the Shared Timer.
var TIMER_SCROLL;
/** 
Scroll fully left function; completely scrolls  a <div> to the left, as far as it will go.
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyLeft(id, d, del){
    // Fetch the element.
    var el = document.getElementById(id);
    // Scroll the element.
    el.scrollLeft += d;
    // Have we not finished scrolling yet?
    if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) {
        TIMER_SCROLL = setTimeout("scrollFullyLeft('"+id+"',"+d+", "+del+");", del);
    }
}

/** 
Scroll fully right function; completely scrolls  a <div> to the right, as far as it will go.
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyRight(id, d, del){
    // Fetch the element.
    var el = document.getElementById(id);
    // Scroll the element.
    el.scrollLeft -= d;
    // Have we not finished scrolling yet?
    if(el.scrollLeft > 0) {
        TIMER_SCROLL = setTimeout("scrollFullyRight('"+id+"',"+d+", "+del+");", del);
    }
}
0
Mapsy