diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
index dfff1a453..bfdd73105 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
@@ -150,6 +150,7 @@ let childrenMap: any = {
   currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
   currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  showVerticalScrollbar: withDefault(BoolControl, false),
 };
 
 // this should ensure backwards compatibility with older versions of the SDK
@@ -188,7 +189,10 @@ let CalendarBasicComp = (function () {
     currentPremiumView?: string; 
     animationStyle?:any;
     modalStyle?:any
-  }) => {
+    showVerticalScrollbar?:boolean
+
+  }, dispatch: any) => {
+  
     const comp = useContext(EditorContext)?.getUICompByName(
       useContext(CompNameContext)
     );
@@ -315,6 +319,7 @@ let CalendarBasicComp = (function () {
       licenseKey,
       resourceName,
       modalStyle,
+      showVerticalScrollbar
     } = props;
 
     const handleEventDataChange = useCallback((data: Array<Record<string,any>>) => {
@@ -745,6 +750,7 @@ let CalendarBasicComp = (function () {
         $editable={editable}
         $style={style}
         $theme={theme?.theme}
+        $showVerticalScrollbar={showVerticalScrollbar}
         onDoubleClick={handleDbClick}
         $left={left}
         key={initialDate ? currentView + initialDate : currentView}
@@ -873,7 +879,8 @@ let CalendarBasicComp = (function () {
       style: { getPropertyView: () => any; };
       animationStyle:  { getPropertyView: () => any; };
       modalStyle: { getPropertyView: () => any; };
-      licenseKey: { getView: () => any; propertyView: (arg0: { label: string; tooltip: string; }) => any; };
+      licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
+      showVerticalScrollbar: { propertyView: (arg0: { label: string; }) => any; };
     }) => {
       const license = children.licenseKey.getView();
       
@@ -918,6 +925,7 @@ let CalendarBasicComp = (function () {
               ? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })
               : children.currentPremiumView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })}
             {children.firstDay.propertyView({ label: trans("calendar.startWeek"), })}
+            {children.showVerticalScrollbar.propertyView({ label: trans("calendar.showVerticalScrollbar")})}
           </Section>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
index a1b3f4203..e8602a8fe 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -32,6 +32,7 @@ export const Wrapper = styled.div<{
   $style?: CalendarStyleType;
   $theme?: ThemeDetail;
   $left?: number;
+  $showVerticalScrollbar?:boolean;
 }>`
   position: relative;
   height: 100%;
@@ -359,6 +360,9 @@ export const Wrapper = styled.div<{
   .fc .fc-scrollgrid table {
     width: 100% !important;
   }
+  .fc-scroller.fc-scroller-liquid-absolute::-webkit-scrollbar {
+    display:${(props) => (props.$showVerticalScrollbar ? 'block' : 'none')};
+  }
 
   // event
   .fc-timegrid-event .fc-event-main {
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
index b1819204a..f6261b84f 100644
--- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
+++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -345,7 +345,8 @@ export const en = {
     animationType:"Type",
     animationDelay:"Delay",
     animationDuration:"Duration",
-    animationIterationCount:"IterationCount"
+    animationIterationCount:"IterationCount",
+    showVerticalScrollbar:"Show Vertical ScrollBar"
   },
 };
 
diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx
index adc5465d9..c20733c0f 100644
--- a/client/packages/lowcoder-design/src/components/Dropdown.tsx
+++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx
@@ -6,6 +6,7 @@ import { ReactNode } from "react";
 import styled from "styled-components";
 import { CustomSelect } from "./customSelect";
 import { EllipsisTextCss } from "./Label";
+import { useEffect } from "react";
 import { TacoMarkDown } from "./markdown";
 import { Tooltip, ToolTipLabel } from "./toolTip";
 
@@ -157,6 +158,19 @@ interface DropdownProps<T extends OptionsType> extends Omit<SelectProps, "placem
 export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
   const { placement = "right" } = props;
   const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option]));
+
+  useEffect(() => {
+    const dropdownElems = document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
+    for (let index = 0; index < dropdownElems.length; index++) {
+      const element = dropdownElems[index];
+      console.log(element);
+      element.style.maxHeight = "300px";
+      element.style.overflowY = "scroll";
+      element.style.minWidth = "150px";
+      element.style.paddingRight = "10px";
+    }
+  }, []);
+
   return (
     <FlexDiv style={props.style} className={props.className}>
       {props.label && (
diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
index a271f3972..df3fe5011 100644
--- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -17,7 +17,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { NameGenerator } from "comps/utils";
-import { Section, controlItem, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, controlItem, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
 import styled from "styled-components";
@@ -96,6 +96,7 @@ const childrenMap = {
   templateRows: withDefault(StringControl, "1fr"),
   rowGap: withDefault(StringControl, "20px"),
   templateColumns: withDefault(StringControl, "1fr 1fr"),
+  mainScrollbar: withDefault(BoolControl, false),
   columnGap: withDefault(StringControl, "20px"),
   style: styleControl(ContainerStyle, 'style'),
   columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle')
@@ -133,48 +134,53 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
     columnGap,
     columnStyle,
     horizontalGridCells,
+    mainScrollbar
   } = props;
 
   return (
     <BackgroundColorContext.Provider value={props.style.background}>
       <DisabledContext.Provider value={props.disabled}>
-        <ContainWrapper $style={{
-          ...props.style,
-          display: "grid",
-          gridTemplateColumns: templateColumns,
-          columnGap,
-          gridTemplateRows: templateRows,
-          rowGap,
-        }}>
-          {columns.map(column => {
-            const id = String(column.id);
-            const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
-            if(!containers[id]) return null
-            const containerProps = containers[id].children;
-            const noOfColumns = columns.length;
-            return (
-              <BackgroundColorContext.Provider value={props.columnStyle.background}>
-                <ColWrapper
-                  key={id}
-                  $style={props.columnStyle}
-                  $minWidth={column.minWidth}
-                  $matchColumnsHeight={matchColumnsHeight}
-                >
-                  <ColumnContainer
-                    layout={containerProps.layout.getView()}
-                    items={gridItemCompToGridItems(containerProps.items.getView())}
-                    horizontalGridCells={horizontalGridCells}
-                    positionParams={containerProps.positionParams.getView()}
-                    dispatch={childDispatch}
-                    autoHeight={props.autoHeight}
-                    style={columnStyle}
-                  />
-                </ColWrapper>
-              </BackgroundColorContext.Provider>
-            )
-            })
-          }
-        </ContainWrapper>
+        <div style={{ height: "inherit", overflow: "auto"}}>
+        <ScrollBar style={{ margin: "0px", padding: "0px" }} overflow="scroll" hideScrollbar={!mainScrollbar}>
+          <ContainWrapper $style={{
+            ...props.style,
+            display: "grid",
+            gridTemplateColumns: templateColumns,
+            columnGap,
+            gridTemplateRows: templateRows,
+            rowGap,
+          }}>
+            {columns.map(column => {
+              const id = String(column.id);
+              const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
+              if(!containers[id]) return null
+              const containerProps = containers[id].children;
+              const noOfColumns = columns.length;
+              return (
+                <BackgroundColorContext.Provider value={props.columnStyle.background}>
+                  <ColWrapper
+                    key={id}
+                    $style={props.columnStyle}
+                    $minWidth={column.minWidth}
+                    $matchColumnsHeight={matchColumnsHeight}
+                  >
+                    <ColumnContainer
+                      layout={containerProps.layout.getView()}
+                      items={gridItemCompToGridItems(containerProps.items.getView())}
+                      horizontalGridCells={horizontalGridCells}
+                      positionParams={containerProps.positionParams.getView()}
+                      dispatch={childDispatch}
+                      autoHeight={props.autoHeight}
+                      style={columnStyle}
+                    />
+                  </ColWrapper>
+                </BackgroundColorContext.Provider>
+              )
+              })
+            }
+          </ContainWrapper>
+        </ScrollBar>
+        </div>
       </DisabledContext.Provider>
     </BackgroundColorContext.Provider>
   );
@@ -207,6 +213,9 @@ export const ResponsiveLayoutBaseComp = (function () {
             <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({
+                label: trans("prop.mainScrollbar")
+              })}
               {children.horizontalGridCells.propertyView({
                 label: trans('prop.horizontalGridCells'),
               })}
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index cb0c689bc..4b53dea3a 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -6,11 +6,11 @@ import { DocumentViewer } from "react-documents";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { StringControl } from "../controls/codeControl";
-import { UICompBuilder } from "../generators";
+import { UICompBuilder, withDefault } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-
+import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
@@ -42,12 +42,18 @@ const StyledDiv = styled.div<{$style: FileViewerStyleType;}>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,animationStyle:AnimationStyleType }) => {
+const DraggableFileViewer = (props: {
+  src: string;
+  style: FileViewerStyleType,
+  animationStyle:AnimationStyleType,
+  showVerticalScrollbar: boolean,
+}) => {
   const [isActive, setActive] = useState(false);
 
   return (
     <StyledDiv
       $style={props.style}
+      id="fileViewer"
       onClick={(e) => setActive(true)}
       onMouseLeave={(e) => setActive(false)}
     >
@@ -67,6 +73,8 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an
 let FileViewerBasicComp = (function () {
   const childrenMap = {
     src: StringControl,
+    autoHeight: withDefault(AutoHeightControl,'auto'),
+    showVerticalScrollbar: withDefault(BoolControl, false),
     style: styleControl(FileViewerStyle , 'style'),
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
@@ -81,7 +89,12 @@ let FileViewerBasicComp = (function () {
         </ErrorWrapper>
       );
     }
-    return <DraggableFileViewer src={props.src} style={props.style} animationStyle={props.animationStyle}/>;
+    return <DraggableFileViewer
+      src={props.src}
+      style={props.style}
+      animationStyle={props.animationStyle}
+      showVerticalScrollbar={props.showVerticalScrollbar}
+    />;
   })
     .setPropertyViewFn((children) => {
       return (
@@ -100,6 +113,14 @@ let FileViewerBasicComp = (function () {
               {hiddenPropertyView(children)}
             </Section>
           )}
+          <Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+              {!children.autoHeight.getView() && (
+                  children.showVerticalScrollbar.propertyView({
+                    label: trans("prop.showVerticalScrollbar"),
+                  })
+                )}
+          </Section>
 
           {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <>
@@ -119,7 +140,7 @@ let FileViewerBasicComp = (function () {
 
 FileViewerBasicComp = class extends FileViewerBasicComp {
   override autoHeight(): boolean {
-    return false;
+    return this.children.autoHeight.getView();
   }
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index a8ddfc99d..298d34970 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -14,15 +14,15 @@ import { i18nObjs, trans } from "i18n";
 import type { JSONSchema7 } from "json-schema";
 import styled from "styled-components";
 import { toBoolean, toNumber, toString } from "util/convertUtils";
-import { Section, sectionNames } from "lowcoder-design";
+import { Section, sectionNames, ScrollBar } from "lowcoder-design";
 import { jsonObjectControl } from "../../controls/codeControl";
 import { eventHandlerControl, submitEvent } from "../../controls/eventHandlerControl";
-import { UICompBuilder } from "../../generators";
+import { UICompBuilder, withDefault } from "../../generators";
 import DateWidget from "./dateWidget";
 import ErrorBoundary from "./errorBoundary";
 import { Theme } from "@rjsf/antd";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
-
+import { AutoHeightControl } from "../../controls/autoHeightControl";
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 
@@ -49,6 +49,11 @@ const Container = styled.div<{
     font-size: 18px;
   }
 
+  .ant-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
   #root-description {
     font-size: 12px;
     display: inline-block;
@@ -188,7 +193,9 @@ let FormBasicComp = (function () {
   const childrenMap = {
     resetAfterSubmit: BoolControl,
     schema: jsonObjectControl(i18nObjs.jsonForm.defaultSchema),
+    showVerticalScrollbar: withDefault(BoolControl, false),
     uiSchema: jsonObjectControl(i18nObjs.jsonForm.defaultUiSchema),
+    autoHeight: AutoHeightControl,
     data: jsonObjectExposingStateControl("data", i18nObjs.jsonForm.defaultFormData),
     onEvent: eventHandlerControl(EventOptions),
     style: styleControl(JsonSchemaFormStyle , 'style'),
@@ -202,6 +209,15 @@ let FormBasicComp = (function () {
 
     return (
       <Container $style={props.style} $animationStyle={props.animationStyle}>
+        <ScrollBar
+            style={{
+              height: props.autoHeight ? "auto" : "100%",
+              margin: "0px",
+              padding: "0px",
+            }}
+            overflow={"hidden"}
+            hideScrollbar={!props.showVerticalScrollbar}
+          >
         <ErrorBoundary>
           <Form
             validator={validator}
@@ -226,6 +242,7 @@ let FormBasicComp = (function () {
             }
           />
         </ErrorBoundary>
+        </ScrollBar>
       </Container>
     );
   })
@@ -325,9 +342,16 @@ let FormBasicComp = (function () {
               })}
             </Section>
           )}
-
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
+             <Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+              {!children.autoHeight.getView() && (
+                  children.showVerticalScrollbar.propertyView({
+                    label: trans("prop.showVerticalScrollbar"),
+                  })
+                )}
+              </Section>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section>
@@ -343,6 +367,13 @@ let FormBasicComp = (function () {
     .build();
 })();
 
+FormBasicComp = class extends FormBasicComp {
+  override autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
+
+
 let FormTmpComp = withExposingConfigs(FormBasicComp, [
   depsConfig({
     name: "data",
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
index b501e3cab..105164b0d 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
@@ -39,7 +39,7 @@ const getStyle = (style: ContainerStyleType) => {
   `;
 };
 
-const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType }>`
+const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType, $mainScrollbars: boolean }>`
   display: flex;
   flex-flow: column;
   height: 100%;
@@ -47,6 +47,10 @@ const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:Animatio
   border-radius: 4px;
   ${(props) => props.$style && getStyle(props.$style)}
   ${props=>props.$animationStyle}
+
+  #pageLayout::-webkit-scrollbar {
+    display: ${(props) => props.$mainScrollbars ? "block" : "none"};
+  }
 `;
 
 const HeaderInnerGrid = styled(InnerGrid)<{
@@ -142,7 +146,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
   }
 
   useEffect(() => {setSiderCollapsed(container.siderCollapsed)} , [container.siderCollapsed]);
-  
+
   return (
     <div style={{padding: style.margin, height: '100%'}}>
       <ConfigProvider
@@ -156,8 +160,8 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
             },
           }}
         >
-      <Wrapper $style={style} $animationStyle={animationStyle}>
-        <Layout style={{padding: "0px"}} hasSider={showSider && !container.innerSider}>
+      <Wrapper $style={style} $animationStyle={animationStyle} $mainScrollbars={container.mainScrollbars}>
+        <Layout id="pageLayout" style={{padding: "0px", overflowY: "scroll"}} hasSider={showSider && !container.innerSider}>
           {showSider && !container.innerSider && !container.siderRight && (
             <><BackgroundColorContext.Provider value={siderStyle?.siderBackground}>
               <Sider 
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
index f5929c7f6..2a921432f 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -53,6 +53,7 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   siderScrollbars: withDefault(BoolControl, false),
   contentScrollbars: withDefault(BoolControl, false),
+  mainScrollbars: withDefault(BoolControl, false),
   style: styleControl(ContainerStyle , 'style'),
   headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'),
   siderStyle: styleControl(ContainerSiderStyle , 'siderStyle'),
@@ -157,8 +158,13 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer {
   heightPropertyView() {
     return [
       this.children.autoHeight.getPropertyView(),
-      this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar")}),
+      this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar") }),
       (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.showVerticalScrollbar") }),
+      (!this.children.autoHeight.getView()) && (
+        !this.children.siderScrollbars.getView() ||
+        !this.children.contentScrollbars.getView()
+       ) &&
+         this.children.mainScrollbars.propertyView({ label: trans("prop.mainScrollbar") }),
     ];
   }
 
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index d52054f17..c51ffb073 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -47,6 +47,7 @@ import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
 const RowWrapper = styled(Row)<{
   $style: ResponsiveLayoutRowStyleType;
   $animationStyle: AnimationStyleType;
+  $showScrollbar:boolean
 }>`
   ${(props) => props.$animationStyle}
   height: 100%;
@@ -56,8 +57,12 @@ const RowWrapper = styled(Row)<{
   border-style: ${(props) => props.$style?.borderStyle};
   padding: ${(props) => props.$style.padding};
   background-color: ${(props) => props.$style.background};
-  overflow-x: auto;
   rotate: ${props=> props.$style.rotation}
+  overflow: ${(props) => (props.$showScrollbar ? 'auto' : 'hidden')};
+   ::-webkit-scrollbar {
+    display: ${(props) => (props.$showScrollbar ? 'block' : 'none')};
+  }
+
 `;
 
 const ColWrapper = styled(Col)<{
@@ -95,6 +100,7 @@ const childrenMap = {
   matchColumnsHeight: withDefault(BoolControl, true),
   style: styleControl(ResponsiveLayoutRowStyle , 'style'),
   columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle'),
+  mainScrollbar: withDefault(BoolControl, false),
   animationStyle:styleControl(AnimationStyle , 'animationStyle'),
   columnPerRowLG: withDefault(NumberControl, 4),
   columnPerRowMD: withDefault(NumberControl, 2),
@@ -138,6 +144,8 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
     horizontalSpacing,
     animationStyle,
     horizontalGridCells,
+    mainScrollbar,
+    autoHeight
   } = props;
 
   return (
@@ -147,6 +155,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
           <RowWrapper
             $style={style}
             $animationStyle={animationStyle}
+            $showScrollbar={mainScrollbar}
             wrap={rowBreak}
             gutter={[horizontalSpacing, verticalSpacing]}
           >
@@ -214,6 +223,9 @@ export const ResponsiveLayoutBaseComp = (function () {
             <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({
+                label: trans("prop.mainScrollbar")
+              })}
               {children.horizontalGridCells.propertyView({
                 label: trans('prop.horizontalGridCells'),
               })}
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index b39c3879c..c0f25aad2 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -79,9 +79,13 @@ const localizeStyle = css`
   }
 `;
 
-const commonStyle = (style: RichTextEditorStyleType) => css`
+const commonStyle = (style: RichTextEditorStyleType, contentScrollBar: boolean) => css`
   height: 100%;
 
+  .ql-editor::-webkit-scrollbar {
+    display: ${contentScrollBar ? "block" : "none"};
+  }
+
   & .ql-editor {
     min-height: 85px;
   }
@@ -126,11 +130,12 @@ const hideToolbarStyle = (style: RichTextEditorStyleType) => css`
 interface Props {
   $hideToolbar: boolean;
   $style: RichTextEditorStyleType;
+  $contentScrollBar: boolean;
 }
 
 const AutoHeightReactQuill = styled.div<Props>`
   ${localizeStyle}
-  ${(props) => commonStyle(props.$style)}
+  ${(props) => commonStyle(props.$style, props.$contentScrollBar)}
   & .ql-container .ql-editor {
     min-height: 125px;
   }
@@ -139,7 +144,7 @@ const AutoHeightReactQuill = styled.div<Props>`
 
 const FixHeightReactQuill = styled.div<Props>`
   ${localizeStyle}
-  ${(props) => commonStyle(props.$style)}
+  ${(props) => commonStyle(props.$style, props.$contentScrollBar)}
   & .quill {
     display: flex;
     flex-direction: column;
@@ -169,6 +174,7 @@ const childrenMap = {
   hideToolbar: BoolControl,
   readOnly: BoolControl,
   autoHeight: withDefault(AutoHeightControl, "fixed"),
+  contentScrollBar: withDefault(BoolControl, false),
   placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")),
   toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)),
   onEvent: ChangeEventHandlerControl,
@@ -188,6 +194,7 @@ interface IProps {
   autoHeight: boolean;
   onChange: (value: string) => void;
   $style: RichTextEditorStyleType;
+  contentScrollBar: boolean;
 }
 
 const ReactQuillEditor = React.lazy(() => import("react-quill"));
@@ -264,6 +271,7 @@ function RichTextEditor(props: IProps) {
       ref={wrapperRef}
       $hideToolbar={props.hideToolbar}
       $style={props.$style}
+      $contentScrollBar={props.contentScrollBar}
     >
       <Suspense fallback={<Skeleton />}>
         <ReactQuillEditor
@@ -300,6 +308,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
       placeholder={props.placeholder}
       onChange={handleChange}
       $style={props.style}
+      contentScrollBar={props.contentScrollBar}
     />
   );
 })
@@ -325,6 +334,9 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
           <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {!children.autoHeight.getView() && children.contentScrollBar.propertyView({
+                label: trans("prop.textAreaScrollBar"),
+              })}
               {children.toolbar.propertyView({ label: trans("richTextEditor.toolbar"), tooltip: trans("richTextEditor.toolbarDescription") })}
               {children.hideToolbar.propertyView({ label: trans("richTextEditor.hideToolbar") })}
             </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index f06e5a231..572ba4a60 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -1,5 +1,5 @@
 import { ConfigProvider, Steps} from "antd";
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, RadiusControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl, numberExposingStateControl } from "comps/controls/codeStateControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -10,7 +10,7 @@ import styled, { css } from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { selectDivRefMethods, } from "./selectInputConstants";
-import { Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
@@ -18,6 +18,7 @@ import { RefControl } from "comps/controls/refControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { useContext, useState, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { AutoHeightControl } from "@lowcoder-ee/index.sdk";
 
 const sizeOptions = [
   {
@@ -76,6 +77,7 @@ const statusOptions = [
 ]
 
 const StepsChildrenMap = {
+  autoHeight: AutoHeightControl,
   initialValue: numberExposingStateControl("1"),
   value: stringExposingStateControl("value"),
   stepStatus : stringExposingStateControl("process"),
@@ -92,13 +94,17 @@ const StepsChildrenMap = {
   options: StepOptionControl,
   style: styleControl(StepsStyle , 'style'),
   viewRef: RefControl<HTMLDivElement>,
-  animationStyle: styleControl(AnimationStyle ,'animationStyle' )
+  animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
+  showVerticalScrollbar: withDefault(BoolControl, false),
+  minHorizontalWidth: withDefault(RadiusControl, ''),
 };
 
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props) => {
     const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
     ${props=>props.$animationStyle}
+      height: 100%;
+      overflow-y: scroll;
       min-height: 24px;
       max-width: ${widthCalculator(props.style.margin)};
       max-height: ${heightCalculator(props.style.margin)};
@@ -168,6 +174,15 @@ let StepControlBasicComp = (function () {
             }}
           >
           <StyledWrapper style={props.style} $animationStyle={props.animationStyle}>
+          <ScrollBar
+            style={{
+              height: props.autoHeight ? "auto" : "100%",
+              minWidth: props.minHorizontalWidth,
+              margin: "0px",
+              padding: "0px",
+            }}
+            overflow="scroll"
+            hideScrollbar={!props.showVerticalScrollbar}>
             <Steps 
               initial={props.initialValue.value -1}
               current={current}
@@ -191,6 +206,7 @@ let StepControlBasicComp = (function () {
                 />
               ))}
             </Steps>
+            </ScrollBar>
           </StyledWrapper>
         </ConfigProvider>
     );
@@ -217,6 +233,16 @@ let StepControlBasicComp = (function () {
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <Section name={sectionNames.layout}>
+            {children.autoHeight.getPropertyView()}
+            {!children.autoHeight.getView() && (
+              children.showVerticalScrollbar.propertyView({
+                label: trans("prop.showVerticalScrollbar"),
+              })
+            )}
+            {children.minHorizontalWidth.propertyView({
+                label: trans("prop.minHorizontalWidth"),
+                placeholder: '100px',
+              })}
             {children.size.propertyView({
               label: trans("step.size"),
               radioButton: true,
@@ -241,6 +267,9 @@ let StepControlBasicComp = (function () {
             { children.displayType.getView() != "inline" && !children.showDots.getView() && (
               children.showIcons.propertyView({label: trans("step.showIcons")}
             ))}
+            {!children.autoHeight.getView() && (
+              children.showVerticalScrollbar.propertyView({label: trans("prop.showVerticalScrollbar")})
+            )}
           </Section>
         )}
 
@@ -260,6 +289,12 @@ let StepControlBasicComp = (function () {
     .build();
 })();
 
+StepControlBasicComp = class extends StepControlBasicComp {
+  override autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
+
 export const StepComp = withExposingConfigs(StepControlBasicComp, [
   new NameConfig("value", trans("step.valueDesc")),
   new NameConfig("stepStatus", trans("step.status") ),
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index ec3acbd9c..e8a695164 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -1,7 +1,7 @@
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import styled, { css } from "styled-components";
 import { AlignCenter } from "lowcoder-design";
 import { AlignLeft } from "lowcoder-design";
@@ -24,6 +24,7 @@ import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl
 import { NewChildren } from "../generators/uiCompBuilder";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { ToViewReturn } from "../generators/multi";
+import { BoolControl } from "@lowcoder-ee/index.sdk";
 
 const EventOptions = [clickEvent] as const;
 
@@ -142,6 +143,7 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   type: dropdownControl(typeOptions, "markdown"),
   horizontalAlignment: alignWithJustifyControl(),
+  contentScrollBar: withDefault(BoolControl, true),
   verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
   style: styleControl(TextStyle, 'style'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
@@ -176,6 +178,10 @@ const TextPropertyView = React.memo((props: {
         <>
           <Section name={sectionNames.layout}>
             {props.children.autoHeight.getPropertyView()}
+            {!props.children.autoHeight.getView() &&
+              props.children.contentScrollBar.propertyView({
+                label: trans("prop.contentScrollbar"),
+              })}
             {!props.children.autoHeight.getView() &&
               props.children.verticalAlignment.propertyView({
                 label: trans("textShow.verticalAlignment"),
@@ -214,7 +220,9 @@ const TextView = React.memo((props: ToViewReturn<ChildrenType>) => {
       }}
       onClick={() => props.onEvent("click")}
     >
-      {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
+      <ScrollBar hideScrollbar={!props.contentScrollBar}>
+        {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
+      </ScrollBar>
     </TextContainer>
   );
 }, (prev, next) => JSON.stringify(prev) === JSON.stringify(next));
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index 4b34ba614..2a559dee3 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -75,6 +75,7 @@ let TextAreaTmpComp = (function () {
     autoHeight: withDefault(AutoHeightControl, "fixed"),
     style: styleControl(InputFieldStyle, 'style') , 
     labelStyle: styleControl(LabelStyle ,'labelStyle' ),
+    textAreaScrollBar: withDefault(BoolControl, false),
     inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
     animationStyle: styleControl(AnimationStyle, 'animationStyle')
   };
@@ -114,6 +115,10 @@ let TextAreaTmpComp = (function () {
           <><TextInputInteractionSection {...children} />
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {!children.autoHeight.getView() &&
+                children.textAreaScrollBar.propertyView({
+                  label: trans("prop.textAreaScrollBar"),
+                })}
               {hiddenPropertyView(children)}
             </Section>
             <Section name={sectionNames.advanced}>
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index f7c877c90..5854058af 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -8,7 +8,7 @@ import {
 } from "lowcoder-core";
 import { trans } from "i18n";
 import { UICompBuilder, withDefault } from "../../generators";
-import { Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
@@ -62,6 +62,8 @@ const childrenMap = {
   value: jsonControl(convertTimeLineData, timelineDate),
   mode: dropdownControl(modeOptions, "alternate"),
   reverse: BoolControl,
+  autoHeight: AutoHeightControl,
+  verticalScrollbar: withDefault(BoolControl, false),
   pending: withDefault(StringControl, trans("timeLine.defaultPending")),
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(TimeLineStyle, 'style'),
@@ -136,31 +138,33 @@ const TimelineComp = (
   }));
 
   return (
-    <div
-      style={{
-        margin: style.margin ?? '3px',
-        padding: style.padding !== '3px' ? style.padding : '20px 10px 0px 10px',
-        width: widthCalculator(style.margin ?? '3px'),
-        height: heightCalculator(style.margin ?? '3px'),
-        background: style.background,
-        overflow: "auto",
-        overflowX: "hidden",
-        borderRadius: style.radius,
-      }}
-    >
-      <Timeline
-        mode={props?.mode || "left"}
-        reverse={props?.reverse}
-        pending={
-          props?.pending && (
-            <span style={{ color: style?.titleColor }}>
-              {props?.pending || ""}
-            </span>
-          )
-        }
-        items={timelineItems}
-      />
-    </div>
+    <ScrollBar hideScrollbar={!props.verticalScrollbar}>
+      <div
+        style={{
+          margin: style.margin ?? '3px',
+          padding: style.padding !== '3px' ? style.padding : '20px 10px 0px 10px',
+          width: widthCalculator(style.margin ?? '3px'),
+          height: heightCalculator(style.margin ?? '3px'),
+          background: style.background,
+          overflow: "auto",
+          overflowX: "hidden",
+          borderRadius: style.radius,
+        }}
+      >
+        <Timeline
+          mode={props?.mode || "left"}
+          reverse={props?.reverse}
+          pending={
+            props?.pending && (
+              <span style={{ color: style?.titleColor }}>
+                {props?.pending || ""}
+              </span>
+            )
+          }
+          items={timelineItems}
+        />
+      </div>
+    </ScrollBar>
   );
 };
 
@@ -187,6 +191,11 @@ let TimeLineBasicComp = (function () {
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <><Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+              {!children.autoHeight.getView() && 
+                children.verticalScrollbar.propertyView({
+                  label: trans("prop.showVerticalScrollbar")
+                })}
               {children.mode.propertyView({
                 label: trans("timeLine.mode"),
                 tooltip: trans("timeLine.modeTooltip"),
@@ -211,7 +220,7 @@ let TimeLineBasicComp = (function () {
 
 TimeLineBasicComp = class extends TimeLineBasicComp {
   override autoHeight(): boolean {
-    return false;
+    return this.children.autoHeight.getView();
   }
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index b6ebf264c..aa117ff5c 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -1,11 +1,10 @@
 import { RecordConstructorToView } from "lowcoder-core";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { withExposingConfigs } from "comps/generators/withExposing";
-import { Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { default as Tree } from "antd/es/tree";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
-import ReactResizeDetector from "react-resize-detector";
 import { StyleConfigType, styleControl } from "comps/controls/styleControl";
 import {  InputFieldStyle, LabelStyle, TreeStyle } from "comps/controls/styleControlConstants";
 import { LabelControl } from "comps/controls/labelControl";
@@ -13,8 +12,6 @@ import { withDefault } from "comps/generators";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { BoolControl } from "comps/controls/boolControl";
 import {
-  advancedSection,
-  expandSection,
   formSection,
   // intersectSection,
   treeCommonChildren,
@@ -24,8 +21,6 @@ import {
   valuePropertyView,
 } from "./treeUtils";
 import {
-  SelectInputInvalidConfig,
-  SelectInputValidationChildren,
   SelectInputValidationSection,
 } from "../selectInputComp/selectInputConstants";
 import { selectInputValidate } from "../selectInputComp/selectInputConstants";
@@ -33,10 +28,11 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { trans } from "i18n";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { AutoHeightControl } from "@lowcoder-ee/index.sdk";
 
 type TreeStyleType = StyleConfigType<typeof TreeStyle>;
 
-const Container = styled.div<TreeStyleType>`
+const Container = styled.div<TreeStyleType & { verticalScrollbar: boolean }>`
   height: 100%;
   padding: 4px;
   background: ${(props) => props.background};
@@ -45,18 +41,8 @@ const Container = styled.div<TreeStyleType>`
   .ant-tree-show-line .ant-tree-switcher {
     background: ${(props) => props.background};
   }
-  .ant-tree:hover .ant-tree-list-scrollbar-show {
-    display: block !important;
-  }
-  .ant-tree-list-scrollbar {
-    width: 6px !important;
-  }
-  .ant-tree-list-scrollbar-thumb {
-    border-radius: 9999px !important;
-    background: rgba(139, 143, 163, 0.2) !important;
-  }
-  .ant-tree-list-scrollbar-thumb:hover {
-    background: rgba(139, 143, 163, 0.5) !important;
+  .simplebar-vertical {
+    display: ${(props) => props.verticalScrollbar ? 'block' : 'none'};
   }
 `;
 
@@ -74,6 +60,8 @@ const childrenMap = {
   checkStrictly: BoolControl,
   autoExpandParent: BoolControl,
   label: withDefault(LabelControl, { position: "column" }),
+  autoHeight: AutoHeightControl,
+  verticalScrollbar: withDefault(BoolControl, false),
   // TODO: more event
   onEvent: SelectEventHandlerControl,
   style: styleControl(InputFieldStyle , 'style'),
@@ -101,50 +89,46 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
     labelStyle,
     inputFieldStyle:props.inputFieldStyle,
     children: (
-      <ReactResizeDetector
-        onResize={(w, h) => setHeight(h)}
-        render={() => (
-          <Container {...props.inputFieldStyle}>
-            <Tree
-              key={selectType}
-              disabled={props.disabled}
-              height={height}
-              rootStyle={{ background: "transparent", color: props.inputFieldStyle.text }}
-              fieldNames={{ title: "label", key: "value" }}
-              treeData={treeData}
-              selectable={selectable}
-              multiple={selectType === "multi"}
-              selectedKeys={selectable ? value.value : []}
-              checkable={checkable}
-              checkedKeys={
-                checkable
-                  ? checkStrictly
-                    ? { checked: value.value, halfChecked: [] }
-                    : value.value
-                  : undefined
-              }
-              checkStrictly={checkStrictly}
-              showLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
-              expandedKeys={expanded.value}
-              autoExpandParent={props.autoExpandParent}
-              onSelect={(keys) => {
-                value.onChange(keys as (string | number)[]);
-                props.onEvent("change");
-              }}
-              onCheck={(keys) => {
-                value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]);
-                props.onEvent("change");
-              }}
-              onExpand={(keys) => {
-                expanded.onChange(keys as (string | number)[]);
-              }}
-              onFocus={() => props.onEvent("focus")}
-              onBlur={() => props.onEvent("blur")}
-            />
-        </Container>
-        )}
-      >
-      </ReactResizeDetector>
+      <Container {...props.inputFieldStyle} verticalScrollbar={props.verticalScrollbar}>
+        <ScrollBar style={{ margin: 0, padding: 0 }}>
+          <Tree
+            key={selectType}
+            disabled={props.disabled}
+            height={height}
+            rootStyle={{ background: "transparent", color: props.inputFieldStyle.text }}
+            fieldNames={{ title: "label", key: "value" }}
+            treeData={treeData}
+            selectable={selectable}
+            multiple={selectType === "multi"}
+            selectedKeys={selectable ? value.value : []}
+            checkable={checkable}
+            checkedKeys={
+              checkable
+                ? checkStrictly
+                  ? { checked: value.value, halfChecked: [] }
+                  : value.value
+                : undefined
+            }
+            checkStrictly={checkStrictly}
+            showLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
+            expandedKeys={expanded.value}
+            autoExpandParent={props.autoExpandParent}
+            onSelect={(keys) => {
+              value.onChange(keys as (string | number)[]);
+              props.onEvent("change");
+            }}
+            onCheck={(keys) => {
+              value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]);
+              props.onEvent("change");
+            }}
+            onExpand={(keys) => {
+              expanded.onChange(keys as (string | number)[]);
+            }}
+            onFocus={() => props.onEvent("focus")}
+            onBlur={() => props.onEvent("blur")}
+          />
+        </ScrollBar>
+      </Container>
     ),
   });
 };
@@ -179,6 +163,11 @@ let TreeBasicComp = (function () {
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <Section name={sectionNames.layout}>
+            {children.autoHeight.getPropertyView()}
+            {!children.autoHeight.getView() && 
+              children.verticalScrollbar.propertyView({
+                label: trans("prop.showVerticalScrollbar")
+              })}
             {children.expanded.propertyView({ label: trans("tree.expanded") })}
             {children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })}
             {children.showLine.propertyView({ label: trans("tree.showLine") })}
@@ -202,7 +191,7 @@ let TreeBasicComp = (function () {
 
 TreeBasicComp = class extends TreeBasicComp {
   override autoHeight(): boolean {
-    return false;
+    return this.children.autoHeight.getView();
   }
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
index 096757b34..ee1fa3248 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
@@ -7,7 +7,7 @@ import {
 } from "comps/controls/styleControlConstants";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
-import { HintPlaceHolder, TacoMarkDown } from "lowcoder-design";
+import { HintPlaceHolder, ScrollBar, TacoMarkDown } from "lowcoder-design";
 import { ReactNode, useContext } from "react";
 import styled, { css } from "styled-components";
 import { checkIsMobile } from "util/commonUtils";
@@ -76,6 +76,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
   display: flex;
   flex-flow: column;
   height: 100%;
+  overflow-y: scroll;
   border: ${(props) => props.$style.borderWidth} ${(props) => (props.$style.borderStyle ? props.$style.borderStyle : "solid")} ${(props) => props.$style.border};
   border-radius: ${(props) => props.$style.radius};
   background-color: ${(props) => props.$style.background};
@@ -194,45 +195,42 @@ export function TriContainer(props: TriContainerProps) {
       )}
       {showBody && (
         <BackgroundColorContext.Provider value={container.style.background}>
-          <div
-            style={{
-              overflowY: "scroll",
-              background: `${container.style.background}`,
-            }}
-          >
-            <BodyInnerGrid
-              $showBorder={false}
-              {...otherBodyProps}
-              horizontalGridCells={horizontalGridCells}
-              items={gridItemCompToGridItems(bodyItems)}
-              autoHeight={container.autoHeight}
-              emptyRows={14}
-              minHeight={showHeader ? "143px" : "142px"}
-              containerPadding={[0, 0]}
-              hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
-              $backgroundColor={bodyStyle?.background || 'transparent'}
-              $borderColor={style?.border}
-              $borderWidth={style?.borderWidth}
-              style={{
-                float: `${props.float}`,
-                width: `${props.float === "none" ? "100%" : `${props.width}%`}`,
-                height: "100%",
-                ...container.bodyStyle
-              }}
-              />
-            <FloatTextWrapper
-              $style={props.style}
-              $horizontalAlignment={props.horizontalAlignment}
-            >
-              <p>
-                {props.type === "markdown" ? (
-                  <TacoMarkDown>{text.value}</TacoMarkDown>
-                ) : (
-                  text.value
-                )}
-              </p>
-            </FloatTextWrapper>
-          </div>
+          <ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!container.showVerticalScrollbar}>
+            <div style={{ background: `${container.style.background}` }}>
+              <BodyInnerGrid
+                $showBorder={false}
+                {...otherBodyProps}
+                horizontalGridCells={horizontalGridCells}
+                items={gridItemCompToGridItems(bodyItems)}
+                autoHeight={container.autoHeight}
+                emptyRows={14}
+                minHeight={showHeader ? "143px" : "142px"}
+                containerPadding={[0, 0]}
+                hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
+                $backgroundColor={bodyStyle?.background || 'transparent'}
+                $borderColor={style?.border}
+                $borderWidth={style?.borderWidth}
+                style={{
+                  float: `${props.float}`,
+                  width: `${props.float === "none" ? "100%" : `${props.width}%`}`,
+                  height: "100%",
+                  ...container.bodyStyle
+                }}
+                />
+              <FloatTextWrapper
+                $style={props.style}
+                $horizontalAlignment={props.horizontalAlignment}
+              >
+                <p>
+                  {props.type === "markdown" ? (
+                    <TacoMarkDown>{text.value}</TacoMarkDown>
+                  ) : (
+                    text.value
+                  )}
+                </p>
+              </FloatTextWrapper>
+            </div>
+          </ScrollBar>
         </BackgroundColorContext.Provider>
       )}
       {showFooter && (
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index 8270d23e7..43fa3e5b7 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -41,11 +41,14 @@ const DrawerWrapper = styled.div`
   }
 `;
 
-const StyledDrawer = styled(Drawer)<{$titleAlign?: string}>`
+const StyledDrawer = styled(Drawer)<{$titleAlign?: string, $drawerScrollbar: boolean}>`
   .ant-drawer-header-title {
     margin: 0px 20px !important;
     text-align: ${(props) => props.$titleAlign || "center"};
   }
+  div.ant-drawer-body div.react-grid-layout::-webkit-scrollbar {
+    display: ${(props) => props.$drawerScrollbar ? "block" : "none"};
+  }
 `;
 
 const ButtonStyle = styled(Button)<{$closePosition?: string, $title? :string}>`
@@ -93,6 +96,7 @@ let TmpDrawerComp = (function () {
       titleAlign: HorizontalAlignmentControl,
       horizontalGridCells: SliderControl,
       autoHeight: AutoHeightControl,
+      drawerScrollbar: withDefault(BoolControl, true),
       style: styleControl(DrawerStyle),
       placement: PositionControl,
       closePosition: withDefault(LeftRightControl, "left"),
@@ -137,6 +141,7 @@ let TmpDrawerComp = (function () {
               }}
               title={props.title}
               $titleAlign={props.titleAlign}
+              $drawerScrollbar={props.drawerScrollbar}
               closable={false}
               placement={props.placement}
               open={props.visible.value}
@@ -209,6 +214,7 @@ let TmpDrawerComp = (function () {
           {children.horizontalGridCells.propertyView({
             label: trans('prop.horizontalGridCells'),
           })}
+          {children.drawerScrollbar.propertyView({ label: trans("prop.drawerScrollbar") })}
           {children.maskClosable.propertyView({
             label: trans("prop.maskClosable"),
           })}
diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
index 0d7ea6be8..ed2710ed5 100644
--- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
@@ -29,7 +29,7 @@ const EventOptions = [
   { label: trans("modalComp.close"), value: "close", description: trans("modalComp.closeDesc") },
 ] as const;
 
-const getStyle = (style: ModalStyleType) => {
+const getStyle = (style: ModalStyleType, modalScrollbar: boolean) => {
   return css`
     .ant-modal-content {
       border-radius: ${style.radius};
@@ -49,6 +49,9 @@ const getStyle = (style: ModalStyleType) => {
         background-color: ${style.background};
       }
     }
+    div.ant-modal-body div.react-grid-layout::-webkit-scrollbar {
+      display: ${modalScrollbar ? "block" : "none"};
+    }
     .ant-modal-close {
       inset-inline-end: 10px !important;
       top: 10px;
@@ -80,8 +83,8 @@ function extractMarginValues(style: ModalStyleType) {
   return valuesarray;
 }
 
-const ModalStyled = styled.div<{ $style: ModalStyleType }>`
-  ${(props) => props.$style && getStyle(props.$style)}
+const ModalStyled = styled.div<{ $style: ModalStyleType, $modalScrollbar: boolean }>`
+  ${(props) => props.$style && getStyle(props.$style, props.$modalScrollbar)}
 `;
 
 const ModalWrapper = styled.div`
@@ -105,6 +108,7 @@ let TmpModalComp = (function () {
       autoHeight: AutoHeightControl,
       title: StringControl,
       titleAlign: HorizontalAlignmentControl,
+      modalScrollbar: withDefault(BoolControl, false),
       style: styleControl(ModalStyle),
       maskClosable: withDefault(BoolControl, true),
       showMask: withDefault(BoolControl, true),
@@ -174,7 +178,7 @@ let TmpModalComp = (function () {
                 if (open) props.onEvent("open");
               }}
               zIndex={Layers.modal}
-              modalRender={(node) => <ModalStyled $style={props.style}>{node}</ModalStyled>}
+              modalRender={(node) => <ModalStyled $style={props.style} $modalScrollbar={props.modalScrollbar}>{node}</ModalStyled>}
               mask={props.showMask}
               className={props.className as string}
               data-testid={props.dataTestId as string}
@@ -203,6 +207,10 @@ let TmpModalComp = (function () {
             label: trans('prop.horizontalGridCells'),
           })}
           {children.autoHeight.getPropertyView()}
+          {!children.autoHeight.getView() && 
+            children.modalScrollbar.propertyView({
+              label: trans("prop.modalScrollbar")
+            })}
           {!children.autoHeight.getView() &&
             children.height.propertyView({
               label: trans("modalComp.modalHeight"),
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 533ad2089..03cedc4e6 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -203,6 +203,10 @@ export const en = {
     "showVerticalScrollbar" : "Show Vertical Scrollbar",
     "showHorizontalScrollbar" : "Show Horizontal Scrollbar",
     "siderScrollbar" : "Show Scrollbars in Sider",
+    "mainScrollbar": "Show Scrollbars in main content",
+    "modalScrollbar": "Show Scrollbars in Modal",
+    "drawerScrollbar": "Show Scrollbars in Drawer",
+    "textAreaScrollBar": "Show Scrollbars in Text Area",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",
diff --git a/translations/locales/en.js b/translations/locales/en.js
index 240d494af..aafb078ed 100644
--- a/translations/locales/en.js
+++ b/translations/locales/en.js
@@ -196,6 +196,10 @@ export const en = {
         "textOverflow": "Text Overflow",
         "scrollbar": "Show Scrollbars",
         "siderScrollbar": "Show Scrollbars in Sider",
+        "mainScrollbar": "Show Scrollbars in main content",
+        "modalScrollbar": "Show Scrollbars in Modal",
+        "drawerScrollbar": "Show Scrollbars in Drawer",
+        "textAreaScrollBar": "Show Scrollbars in Text Area",
         "siderRight": "Show sider on the Right",
         "siderWidth": "Sider Width",
         "siderWidthTooltip": "Sider width supports percentages (%) and pixels (px).",
diff --git a/translations/locales/en.ts b/translations/locales/en.ts
index 418b180c9..75c7036bb 100644
--- a/translations/locales/en.ts
+++ b/translations/locales/en.ts
@@ -201,6 +201,10 @@ export const en = {
     "textOverflow": "Text Overflow",
     "scrollbar": "Show Scrollbars",
     "siderScrollbar" : "Show Scrollbars in Sider",
+    "mainScrollbar": "Show Scrollbars in main content",
+    "modalScrollbar": "Show Scrollbars in Modal",
+    "drawerScrollbar": "Show Scrollbars in Drawer",
+    "textAreaScrollBar": "Show Scrollbars in Text Area",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",