滚动到DIV元素的底部

Question

我看过这个帖子上的无数帖子并尝试了所有帖子，似乎都没有用，我也不知道为什么。

基本上我将一个SQL生成的html页面加载到div中，并尝试滚动到它的底部。几小时后，仍然无法理解。

import _ from 'lodash';
import React from 'react';
import Photo from './Photo';
import {
  gql,
  graphql,
} from 'react-apollo';

const PhotoGrid = (props) => ({

  handleSubmit(e) {
    e.preventDefault();
    this.props.addItem(this.refs.item.value);
  },

  render() {
    const { data } = this.props;
    
    if (data.loading) {
      return <p>Loading ...</p>;
    }
    if (data.error) {
      return <p>{data.error.message}</p>;
    }
    return (
      <div className="photo-grid">
        { data.allPostses.map( posts => <Photo data={{loading: true, error: false}} key={posts.id} i={posts.id} post={posts} /> ) }
      </div>
    )
  }
});

const allPostsCommentsQuery = gql`
  query allPostsCommentsQuery {
    allPostses {
      id
      displaysrc
      caption
      likes
      comments {
        id
        posts {
          id
        }
        text
        user
      }
    }
  }
`;

const PhotoGridWithData = graphql(allPostsCommentsQuery)(PhotoGrid);

export default PhotoGridWithData;

它不会滚动到页面底部。就像我说的那样，我在这里尝试了多种滚动线变体。

修改

试过这个，仍然没有运气;

<script type="text/javascript"> 
$(document).ready(function() {
    $('#chat_grab').load('chat_grab.php');
    $('#chat_grab').stop().animate({ scrollTop: $('#chat_grab')[0].scrollHeight}, 800);
    });
</script>

<div id="chat_grab" style="height: 152px; overflow-y: auto"></div>

Answer 1

试试这个

 $('html, body').stop().animate({ 
   scrollTop: $('#chat_grab').offset().top - 100
 }, 800);