javascript - How keep scroll bar in bottom in div? - Stack Overflow

admin管理员组

文章数量:1357646

I have many tabs and when click any tab, a vertical scrolling div is shown. Like facebook messages page: When click to any User's name. Dialog seems and scroll bar is on the bottom of div by default.

Here is tabs:

<ul class="panies">
    @foreach (var item in Model)
    {
       <li id='pany_@(item.Id)' data-id='@item.Id' >
           <a>@item.Name</a>
       </li>
    }
</ul>

And content:

@foreach (var item in Model)
{
   <div id="scrollingDiv"  class="scrollingDiv"> @item.News </div>
}

And CSS:

.scrollingDiv {
    overflow-x: hidden;
    max-height: 500px;
    overflow-y: scroll;
}

I want to keep scroll bar on the bottom when click any tab. (To see always last news). Also current div. I checked this questions. But not worked in my application. How can I solve this issue?

I have many tabs and when click any tab, a vertical scrolling div is shown. Like facebook messages page: When click to any User's name. Dialog seems and scroll bar is on the bottom of div by default.

Here is tabs:

<ul class="panies">
    @foreach (var item in Model)
    {
       <li id='pany_@(item.Id)' data-id='@item.Id' >
           <a>@item.Name</a>
       </li>
    }
</ul>

And content:

@foreach (var item in Model)
{
   <div id="scrollingDiv"  class="scrollingDiv"> @item.News </div>
}

And CSS:

.scrollingDiv {
    overflow-x: hidden;
    max-height: 500px;
    overflow-y: scroll;
}

I want to keep scroll bar on the bottom when click any tab. (To see always last news). Also current div. I checked this questions. But not worked in my application. How can I solve this issue?

• javascript
• jquery
• asp-mvc
• scroll
• scrollbar

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Feb 15, 2013 at 12:36 Jeyhun RahimovJeyhun Rahimov 3,78766 gold badges4848 silver badges9393 bronze badges 2

• I think the $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight); thing should work for you. How do you know you implemented this code correctly? – Gaurav Pandey Commented Feb 15, 2013 at 12:44
• I checked that code by class name, not by id. $(".scrollingDiv").scrollTop($(".scrollingDiv")[0].scrollHeight); Nothing changed. – Jeyhun Rahimov Commented Feb 15, 2013 at 12:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

With JavaScript, you can do something like

var d = document.getElementById('myDiv');

if(d.scrollHeight > d.clientHeight) {
  d.scrollTop = d.scrollHeight - d.clientHeight;
}

and execute this logic every time you add content to the div or when you want the scrollable container to scroll to the bottom.

jQuery's scrollTop() function might be just what you need. See http://api.jquery./scrollTop/

You can achieve it by using below code

$('.full-area').scrollTop($('.full-area')[0].scrollHeight);

本文标签： javascriptHow keep scroll bar in bottom in divStack Overflow