مشکل در لیست بی نهایت reactjs

اصلا متوجه سوالتون نشم !
کدتون رو قرار بدید ببینیم مشکلتون از کجاست !

لطفا قبل از ارسال گفتگو، بر روی دکمه پیش‌نمایش کلیک کنید. تا از درست بودن نکته ارسال کد و ارور‌ مطمئن شوید.

<div className="sideBar cursor">
          <InfiniteScroll
            pageStart={20}
            loadMore={this.handleLoadMore.bind(this)}
            hasMore={this.state.hasMore}
            loader={<div className="loader" key={0}>Loading ...</div>}
          >
             {this.state.resturants.map((item, index) =>
                 <Sidebar key={index} name={item.restaurant.name} id={item.restaurant.id}
                 clicked={() => { this.selectRestaurant(item.restaurant.id) }} />)}

          </InfiniteScroll>

کد بالا واسه اسکرول بی نهایته که به درستی هم کار میکنه. مشکل وقتی به وجود میاد که من ارتفاع و overflow-y بهش میدم. بعد دیگه عمل نمیکنه و فقط اطلاعات صفحه اولو نشون میده.
استایلی که میدم:

.sideBar{

  background:E5E5E5;
  grid-area: sideBar;
  display: grid;
  grid-template-columns: auto;
  max-height:530px;
  overflow-y: scroll;

}

گوشه سمت چپ صفحم یه sidebar هست که اگه بهش overflow ندم کل صفحه اسکرول میخوره و من اینو نمیخوام
@hesammousavi

خوب کل روند اشتباه دیگه شما دارید به کلاس sideBar حداقل ارتفاع میدید همین حداکثر ارتفاع دادن باعث میشه که اسکرول بی نهایت شما کار نکنه
این اطلاعات در sidebar نمایش داده میشه ؟ که اسکرول بی نهایت رو در داخل این کلاس قرار دادید ؟
کلا مشخص هست روند رو اشتباه رفتید

بله در sidebar نمایش داده میشه. اسکرول رو در app قرار دادم و child اون رو sidebar دادم.
من نمی خوام کل صفحه اسکرول بخوره. میخوام فقط قسمت sidebar اسکرول بگیره. چیکار کنم؟
@hesammousavi

پس یکاری کنید یک المنت فرزند مشخص کنید ( فرزند sidebar ) اسکرول بینهایت رو داخل اون بزارید و حتما چک کنید که المنت فرزند کل طول sidbar باشه اینطوری احتمالا حل میشه

@parastoo.ebrahimi1990 کامپوننت InfiniteScroll چیه؟ خودتون نوشتین یا کامپونتت خاصی هست؟

@hesammousavi ممنونم مشکل حل شد و فقط سایدبار اسکرول گرفت.
@bestweb یه پکیج آمادست برای اسکرول بی نهایت که میتونید از گیتاب بگیریدو استفاده کنید