diff --git a/src/Theme/getBaseCSSText.tsx b/src/Theme/getBaseCSSText.tsx
index 8a41eb55..6b94bab4 100644
--- a/src/Theme/getBaseCSSText.tsx
+++ b/src/Theme/getBaseCSSText.tsx
@@ -1,5 +1,5 @@
 
-const getBaseCSS = (theme: ReactUWP.ThemeType, themeClassName = "uwp-base") => `* {
+const getBaseCSS = (theme: ReactUWP.ThemeType, themeClassName = "uwp-base", scrollBarStyleSelector = "*") => `* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -13,23 +13,23 @@ body {
   margin: 0;
 }
 
-*::-webkit-scrollbar-track {
+${scrollBarStyleSelector}::-webkit-scrollbar-track {
   background-color: ${theme.chromeLow};
 }
 
-*::-webkit-scrollbar-thumb {
+${scrollBarStyleSelector}::-webkit-scrollbar-thumb {
   background-color: ${theme.useFluentDesign ? theme.baseLow : theme.baseMediumLow};
 }
 
-*::-webkit-scrollbar:vertical {
+${scrollBarStyleSelector}::-webkit-scrollbar:vertical {
   width: 6px;
 }
 
-*::-webkit-scrollbar:horizontal {
+${scrollBarStyleSelector}::-webkit-scrollbar:horizontal {
   height: 6px
 }
 
-*::-webkit-scrollbar {
+${scrollBarStyleSelector}::-webkit-scrollbar {
   -webkit-appearance: none
 }
 
diff --git a/src/Theme/index.doc.json b/src/Theme/index.doc.json
index 0c463eed..6025e6c8 100644
--- a/src/Theme/index.doc.json
+++ b/src/Theme/index.doc.json
@@ -30,31 +30,37 @@
           "name": "theme",
           "documentation": "Set theme object. [ThemeType](https://github.com/myxvisual/react-uwp/blob/master/typings/index.d.ts#L43), Usually use [getTheme](https://github.com/myxvisual/react-uwp/blob/master/src/styles/getTheme.ts#L28) function to get it.",
           "isRequired": false,
-          "type": "any"
+          "type": "prototype"
         },
         {
           "name": "autoSaveTheme",
           "documentation": "For simple development, autoSaveTheme can read and save theme to `localStorage`. use global context `theme.saveTheme` method to save.",
           "isRequired": false,
-          "type": "boolean"
+          "type": "prototype"
         },
         {
           "name": "themeWillUpdate",
           "documentation": "set theme will update callback.",
           "isRequired": false,
-          "type": "(theme?: any) => void"
+          "type": "prototype"
         },
         {
           "name": "onGeneratedAcrylic",
           "documentation": "onGeneratedAcrylic callback, base acrylic textures is base64 url image, for production, you can set this callback, post image to your server, and update theme(use this callback will not auto update theme).",
           "isRequired": false,
-          "type": "(theme?: any) => void"
+          "type": "prototype"
         },
         {
           "name": "needGenerateAcrylic",
           "documentation": "for production if you have generated acrylic textures, you can disabled generation acrylic textures.",
           "isRequired": false,
-          "type": "boolean"
+          "type": "prototype"
+        },
+        {
+          "name": "scrollBarStyleSelector",
+          "documentation": "default is \"*\", set all element scroll bar style to uwp style.",
+          "isRequired": false,
+          "type": "prototype"
         }
       ]
     },
@@ -71,7 +77,7 @@
         {
           "name": "currTheme",
           "isRequired": false,
-          "type": "any"
+          "type": "prototype"
         }
       ]
     },
@@ -107,11 +113,11 @@
       "exports": [
         {
           "name": "prototype",
-          "type": "prototype"
+          "type": "any"
         },
         {
           "name": "defaultProps",
-          "initializerText": " {\n    needGenerateAcrylic: true,\n    onGeneratedAcrylic: themeCallback,\n    themeWillUpdate: themeCallback\n  }",
+          "initializerText": " {\n    needGenerateAcrylic: true,\n    onGeneratedAcrylic: themeCallback,\n    themeWillUpdate: themeCallback,\n    scrollBarStyleSelector: \"*\"\n  }",
           "type": "ThemeProps"
         },
         {
@@ -165,7 +171,7 @@
         },
         {
           "name": "bindNewThemeMethods",
-          "initializerText": " (theme: ReactUWP.ThemeType) => {\n    const styleManager =  new StyleManager({ theme });\n    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme));\n    Object.assign(theme, {\n      desktopBackground: `url(${theme.desktopBackgroundImage}) no-repeat fixed top left / cover`,\n      updateTheme: this.updateTheme,\n      saveTheme: this.saveTheme,\n      addToast: this.addToast,\n      updateToast: this.updateToast,\n      deleteToast: this.deleteToast,\n      scrollRevealListener: this.handleScrollReveal,\n      generateAcrylicTextures: this.generateAcrylicTextures,\n      forceUpdateTheme: this.forceUpdateTheme,\n      styleManager\n    } as ReactUWP.ThemeType);\n  }",
+          "initializerText": " (theme: ReactUWP.ThemeType) => {\n    const { scrollBarStyleSelector } = this.props;\n    const styleManager =  new StyleManager({ theme });\n    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme, \"uwp-base\", scrollBarStyleSelector));\n    Object.assign(theme, {\n      desktopBackground: `url(${theme.desktopBackgroundImage}) no-repeat fixed top left / cover`,\n      updateTheme: this.updateTheme,\n      saveTheme: this.saveTheme,\n      addToast: this.addToast,\n      updateToast: this.updateToast,\n      deleteToast: this.deleteToast,\n      scrollRevealListener: this.handleScrollReveal,\n      generateAcrylicTextures: this.generateAcrylicTextures,\n      forceUpdateTheme: this.forceUpdateTheme,\n      styleManager\n    } as ReactUWP.ThemeType);\n  }",
           "type": "(theme: any) => void"
         },
         {
diff --git a/src/Theme/index.tsx b/src/Theme/index.tsx
index 0fe4fe0b..ba8ffbd2 100644
--- a/src/Theme/index.tsx
+++ b/src/Theme/index.tsx
@@ -33,6 +33,10 @@ export interface DataProps {
    * for production if you have generated acrylic textures, you can disabled generation acrylic textures.
    */
   needGenerateAcrylic?: boolean;
+  /**
+   * default is "*", set all element scroll bar style to uwp style.
+   */
+  scrollBarStyleSelector?: string;
 }
 
 export interface ThemeProps extends DataProps, React.HTMLAttributes<HTMLDivElement> {}
@@ -49,7 +53,8 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   static defaultProps: ThemeProps = {
     needGenerateAcrylic: true,
     onGeneratedAcrylic: themeCallback,
-    themeWillUpdate: themeCallback
+    themeWillUpdate: themeCallback,
+    scrollBarStyleSelector: "*"
   };
   static childContextTypes = {
     theme: PropTypes.object
@@ -185,8 +190,9 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   }
 
   bindNewThemeMethods = (theme: ReactUWP.ThemeType) => {
+    const { scrollBarStyleSelector } = this.props;
     const styleManager =  new StyleManager({ theme });
-    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme));
+    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme, "uwp-base", scrollBarStyleSelector));
     Object.assign(theme, {
       desktopBackground: `url(${theme.desktopBackgroundImage}) no-repeat fixed top left / cover`,
       updateTheme: this.updateTheme,
@@ -424,6 +430,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
       className,
       needGenerateAcrylic,
       themeWillUpdate,
+      scrollBarStyleSelector,
       ...attributes
     } = this.props;
     const { currTheme } = this.state;