2016-10-26 2 views
0

Ich habe alle verfügbaren Möglichkeiten im Netz versucht, konnte jedoch nicht bis zum Ende von div scrollen, wenn ein Element angeklickt wird.Scrollen nach unten von div nicht möglich

Aber ich kann den Boden bestimmen, wenn das Div manuell gescrollt wird. Hilf mir, stattdessen automatisch zum Ende von div zu scrollen.

bestimmt die Unterseite div wenn

Versuche zum Boden automatisch zu scrollen

$(".ckit-container__bd").on('scroll', function() { 
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
     alert('bottom'); 
    } 
}); 
gescrollt:

1) $('.ckit-container__bd').scrollTop($('.ckit-container__bd').offset().top);

2)

$(".ckit-container__bd").animate({ 
    scrollTop: $('.ckit-container__bd')[0].scrollHeight - $('.ckit-container__bd')[0].clientHeight 
}, 1000); 

3)

var objDiv = document.getElementsByClassName("ckit-container__bd"); 
objDiv.scrollTop = objDiv.scrollHeight; 

DOM-Struktur:

enter image description here

+0

Sie können hier eine Vorstellung von diesem [Beitrag] (http bekommen: // stackoverflow.com/questions/8773405/how-to-auto-scroll-to-target-div-with-jquery) –

+0

zeigen Sie Ihre HTML-Code –

+0

@TheMechanic, ich habe DOM Struktur als Bild in meinem Beitrag oben..bedenken, dass div mit dieser Klasse hat scrollbar .ckit-container__bd und ich nee d, um auf den Grund dieses div zu gelangen. – 112233

Antwort

-2

Scroll wird im Anzeigefenster arbeiten.

Ein Element wie div ist kein Anzeigefenster, daher ist auch die untere Position gültig, der Bildlauf ist ungültig.

Vielleicht können Sie versuchen, denken Sie so - scroll bedeutet Element verschieben. Ein Element [div] als Umbruch- und Stilattribut [overflow: hidden], ein Element [div] darin und das innere Element [div] verschieben, um den Funktionsscroll zu implementieren.

Hoffen Sie etwas Hilfe für Sie.

+0

Ich habe bereits ein inneres Element, das .ckit-container__bd und wrapper..aber es geht nicht nach unten. Nur vielleicht die ersten paar Male scrollte es automatisch, aber danach ist es nicht – 112233

-1

Ich habe dieses Problem behoben, indem die scrollTopvalue von 0 bis 20000. Ändern

$('.ckit-container__bd').animate({scrollTop: 20000}, 2000); 
+0

'20000' ist alles andere als eine schöne Lösung :) –

0

$("button").on("click", function(){ 
 
    
 
    var $sc = $("#scrollable"); // Store your element reference 
 

 
    $sc.stop().animate({ 
 
    scrollTop: $sc[0].scrollHeight - $sc[0].clientHeight 
 
    }, 800); 
 
    
 
});
#scrollable{height:150px; width:200px; overflow:auto;} 
 
p{height:500px; border:2px dashed #000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>SCROLL TO BOTTOM</button> 
 
<div id="scrollable"> 
 
<p></p> 
 
</div>