diff --git a/public/assets/styles/dark.css b/public/assets/styles/dark.css
index 64207b69..dad180cb 100644
--- a/public/assets/styles/dark.css
+++ b/public/assets/styles/dark.css
@@ -186,7 +186,6 @@ textarea::-ms-input-placeholder,
 .add-dialog-new-shelf-box,
 .edit-dialog-book-name-box,
 .edit-dialog-book-author-box,
-::-webkit-scrollbar,
 .booklist-shelf-list,
 .progress-slide-circle {
   background: rgba(47, 52, 55, 1);
diff --git a/public/assets/styles/default.css b/public/assets/styles/default.css
index bd4e34d8..bbfc2005 100644
--- a/public/assets/styles/default.css
+++ b/public/assets/styles/default.css
@@ -167,7 +167,7 @@ textarea::-ms-input-placeholder,
 .message-box-container {
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
 }
-::-webkit-scrollbar,
+
 .tag-list-item {
   background-color: white;
 }
diff --git a/src/components/dialogs/backupDialog/component.tsx b/src/components/dialogs/backupDialog/component.tsx
index e9fe5d79..a384147e 100644
--- a/src/components/dialogs/backupDialog/component.tsx
+++ b/src/components/dialogs/backupDialog/component.tsx
@@ -41,6 +41,7 @@ class BackupDialog extends React.Component<
   handleFinish = () => {
     this.setState({ currentStep: 2 });
     this.props.handleLoadingDialog(false);
+    this.showMessage("Sync Successfully");
   };
   handleRestoreToLocal = (event: any) => {
     event.preventDefault();
diff --git a/src/containers/htmlViewer/component.tsx b/src/containers/htmlViewer/component.tsx
index 4b01c45b..962a5ff9 100644
--- a/src/containers/htmlViewer/component.tsx
+++ b/src/containers/htmlViewer/component.tsx
@@ -71,7 +71,18 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
       this.props.handleLeaveReader("bottom");
     });
   }
-
+  handleIframeHeight = () => {
+    let iFrame: any = document.getElementsByTagName("iframe")[0];
+    var body = iFrame.contentWindow.document.body,
+      html = iFrame.contentWindow.document.documentElement;
+    iFrame.height = Math.max(
+      body.scrollHeight,
+      body.offsetHeight,
+      html.clientHeight,
+      html.scrollHeight,
+      html.offsetHeight
+    );
+  };
   handleRecord() {
     OtherUtil.setReaderConfig("windowWidth", document.body.clientWidth + "");
     OtherUtil.setReaderConfig("windowHeight", document.body.clientHeight + "");
@@ -81,8 +92,8 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
       this.state.key,
       document.body.clientWidth,
       document.body.clientHeight,
-      window.frames[0].document.scrollingElement!.scrollTop,
-      window.frames[0].document.scrollingElement!.scrollHeight
+      document.getElementsByClassName("ebook-viewer")[0].scrollTop,
+      document.getElementsByClassName("ebook-viewer")[0].scrollHeight
     );
   }
   handleRest = (docStr: string) => {
@@ -101,10 +112,12 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
     window.frames[0].document.body.innerHTML = (this.props.htmlBook
       .doc as any).documentElement.outerHTML;
     styleUtil.addHtmlCss();
-    window.frames[0].document.scrollingElement!.scrollTo(
-      0,
-      RecordLocation.getScrollHeight(this.state.key).scroll
-    );
+    setTimeout(() => {
+      document
+        .getElementsByClassName("ebook-viewer")[0]
+        .scrollTo(0, RecordLocation.getScrollHeight(this.state.key).scroll);
+    }, 1);
+    this.handleIframeHeight();
   };
   handleMobi = async (result: ArrayBuffer) => {
     let mobiFile = new MobiParser(result);
@@ -162,23 +175,25 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
   };
   render() {
     return (
-      <iframe
+      <div
         className="ebook-viewer"
-        title="html-viewer"
-        width={`${
-          (100 * parseFloat(OtherUtil.getReaderConfig("scale") || "1")) / 2
-        }%`}
-        height="100%"
         style={{
+          width: `${
+            (100 * parseFloat(OtherUtil.getReaderConfig("scale") || "1")) / 2
+          }%`,
+          height: "100%",
           marginLeft: `${
             (100 *
               (2 - parseFloat(OtherUtil.getReaderConfig("scale") || "1"))) /
             4
           }%`,
+          overflowY: "scroll",
         }}
       >
-        Loading
-      </iframe>
+        <iframe title="html-viewer" width="100%">
+          Loading
+        </iframe>
+      </div>
     );
   }
 }
diff --git a/src/utils/readUtils/styleUtil.tsx b/src/utils/readUtils/styleUtil.tsx
index d4fc7768..5bc54f4d 100644
--- a/src/utils/readUtils/styleUtil.tsx
+++ b/src/utils/readUtils/styleUtil.tsx
@@ -66,7 +66,7 @@ class styleUtil {
     let colors = ["#FBF1D1", "#EFEEB0", "#CAEFC9", "#76BEE9"];
     let lines = ["#FF0000", "#000080", "#0000FF", "#2EFF2E"];
 
-    return `::selection{background:#f3a6a68c}::-moz-selection{background:#f3a6a68c}[class*=color-]:hover{cursor:pointer;background-image:linear-gradient(0,rgba(0,0,0,.075),rgba(0,0,0,.075))}.color-0{background-color:${colors[0]}}.color-1{background-color:${colors[1]}}.color-2{background-color:${colors[2]}}.color-3{background-color:${colors[3]}}.line-0{border-bottom:2px solid ${lines[0]}}.line-1{border-bottom:2px solid ${lines[1]}}.line-2{border-bottom:2px solid ${lines[2]}}.line-3{border-bottom:2px solid ${lines[3]}}}::-webkit-scrollbar{width: 5px;height: 0.5rem;}::-webkit-scrollbar-track{border-radius: 0;}::-webkit-scrollbar-thumb{border-radius: 0;transition: all 0.2s;border-radius: 0.5rem;opacity: 0.5;}img{max-width:100%}`;
+    return `::selection{background:#f3a6a68c}::-moz-selection{background:#f3a6a68c}[class*=color-]:hover{cursor:pointer;background-image:linear-gradient(0,rgba(0,0,0,.075),rgba(0,0,0,.075))}.color-0{background-color:${colors[0]}}.color-1{background-color:${colors[1]}}.color-2{background-color:${colors[2]}}.color-3{background-color:${colors[3]}}.line-0{border-bottom:2px solid ${lines[0]}}.line-1{border-bottom:2px solid ${lines[1]}}.line-2{border-bottom:2px solid ${lines[2]}}.line-3{border-bottom:2px solid ${lines[3]}}}img{max-width:100%}`;
   }
   static getCustomCss(isJSON: boolean = true) {
     if (isJSON) {