向下滚动时保持在底部,向上滚动时保持在顶部

时间:2019-01-22 05:54:56

标签: angular typescript

一旦到达终点,我必须将div定位在屏幕底部。其他内容应该是可滚动的

我已经尝试找出div的高度,然后触发一个事件以将位置固定在底部

 <div class="home">
 <div class="col-lg-9 no-padding feed">
  <app-birthday></app-birthday>
   <div scrollEnd [scrollDisabled]="!showMore" 
    (scrollDown)="showMoreList()">
    <app-news-feed
      (getFilterValFromChild)="receiveFilterInParent($event)"
      [newsFeed]="newsFeed"
    ></app-news-feed>
  </div>
 </div>
 <div class="col-lg-3 no-padding side">
    <app-holiday-list></app-holiday-list>
    <app-corporate-block></app-corporate-block>
    <app-aboutus-menu></app-aboutus-menu>
  </div>
 </div>

  constructor(
   private logger: LoggerService,
   private homeService: HomeService
  ) {}
  ngOnInit() {
  this.getNews();
  }

  getNews() {
  this.homeService
  .getNewsFeed(this.category, this.subCategory, this.pageNum, 
  this.limit)
  .subscribe(res => {
    this.logger.log(res.body);
    if (this.pageNum == 1) this.newsFeed = res.body.pinnedposts;
    this.newsFeed = this.newsFeed.concat(res.body.nonPinnedPosts);
    if (res.body.nonPinnedPosts.length === this.limit) this.showMore 
   = true;
  });
  }

  showMoreList() {
  this.pageNum++;
  this.logger.log(this.pageNum);
  this.showMore = false;
  this.getNews();
  }

  receiveFilterInParent(filterVal: String) {
  this.category = filterVal;
  this.pageNum = 1;
  if (filterVal == "all") this.category = "";
  this.getNews();
  }

我希望它像在“ Facebook网站”中一样,您可以在主要内容的右侧获得故事和建议的组。如果仔细看,您会发现滚动时滚动条会与主要内容一起滚动到末尾,然后在右侧内容无显示后停止。并且只有主要内容滚动。 但是我得到的实际输出是我的案例中的主要内容和右侧内容都在滚动。

Expected

Actual

1 个答案:

答案 0 :(得分:0)

我坚信这与CSS有关。我建议您以如下方式编写函数:div的滚动到达末尾时,向div添加一个固定的类。

.fixed {
position: fixed
bottom: 0 
}

不是我的,而是https://codepen.io/jamesbarnett/pen/JwFuy这支笔可以关联。