diff --git a/web/src/pages/knowledge/index.tsx b/web/src/pages/knowledge/index.tsx
index c3bf6c3fd..df9ddb23d 100644
--- a/web/src/pages/knowledge/index.tsx
+++ b/web/src/pages/knowledge/index.tsx
@@ -50,7 +50,7 @@ const KnowledgeList = () => {
   }, [data?.pages]);
 
   return (
-    <Flex className={styles.knowledge} vertical flex={1} id="scrollableDiv">
+    <Flex className={styles.knowledge} vertical flex={1}>
       <div className={styles.topWrapper}>
         <div>
           <span className={styles.title}>
@@ -79,33 +79,45 @@ const KnowledgeList = () => {
         </Space>
       </div>
       <Spin spinning={loading}>
-        <InfiniteScroll
-          dataLength={nextList?.length ?? 0}
-          next={fetchNextPage}
-          hasMore={hasNextPage}
-          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-          endMessage={!!total && <Divider plain>{t('noMoreData')} 🤐</Divider>}
-          scrollableTarget="scrollableDiv"
+        <div
+          id="scrollableDiv"
+          style={{
+            height: 'calc(100vh - 250px)',
+            overflow: 'auto',
+            padding: '0 16px',
+          }}
         >
-          <Flex
-            gap={'large'}
-            wrap="wrap"
-            className={styles.knowledgeCardContainer}
+          <InfiniteScroll
+            dataLength={nextList?.length ?? 0}
+            next={fetchNextPage}
+            hasMore={hasNextPage}
+            loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+            endMessage={
+              !!total && <Divider plain>{t('noMoreData')} 🤐</Divider>
+            }
+            scrollableTarget="scrollableDiv"
+            scrollThreshold="200px"
           >
-            {nextList?.length > 0 ? (
-              nextList.map((item: any, index: number) => {
-                return (
-                  <KnowledgeCard
-                    item={item}
-                    key={`${item?.name}-${index}`}
-                  ></KnowledgeCard>
-                );
-              })
-            ) : (
-              <Empty className={styles.knowledgeEmpty}></Empty>
-            )}
-          </Flex>
-        </InfiniteScroll>
+            <Flex
+              gap={'large'}
+              wrap="wrap"
+              className={styles.knowledgeCardContainer}
+            >
+              {nextList?.length > 0 ? (
+                nextList.map((item: any, index: number) => {
+                  return (
+                    <KnowledgeCard
+                      item={item}
+                      key={`${item?.name}-${index}`}
+                    ></KnowledgeCard>
+                  );
+                })
+              ) : (
+                <Empty className={styles.knowledgeEmpty}></Empty>
+              )}
+            </Flex>
+          </InfiniteScroll>
+        </div>
       </Spin>
       <KnowledgeCreatingModal
         loading={creatingLoading}