diff --git a/apps/documenteditor/main/resources/help/de/editor.css b/apps/documenteditor/main/resources/help/de/editor.css
index bdd53336b1..dbcd9606c3 100644
--- a/apps/documenteditor/main/resources/help/de/editor.css
+++ b/apps/documenteditor/main/resources/help/de/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/documenteditor/main/resources/help/en/editor.css b/apps/documenteditor/main/resources/help/en/editor.css
index ed548dffd1..d59bdafe7d 100644
--- a/apps/documenteditor/main/resources/help/en/editor.css
+++ b/apps/documenteditor/main/resources/help/en/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
@@ -11,6 +12,7 @@ text-align: center;
 vertical-align: middle;
 }
 
+
 .cross-reference td{
 text-align: center;
 vertical-align: middle;
diff --git a/apps/documenteditor/main/resources/help/es/editor.css b/apps/documenteditor/main/resources/help/es/editor.css
index 2133d8370f..429ab5cea8 100644
--- a/apps/documenteditor/main/resources/help/es/editor.css
+++ b/apps/documenteditor/main/resources/help/es/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/documenteditor/main/resources/help/fr/editor.css b/apps/documenteditor/main/resources/help/fr/editor.css
index 2133d8370f..429ab5cea8 100644
--- a/apps/documenteditor/main/resources/help/fr/editor.css
+++ b/apps/documenteditor/main/resources/help/fr/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/documenteditor/main/resources/help/it/editor.css b/apps/documenteditor/main/resources/help/it/editor.css
index d05205136d..08402e6b89 100644
--- a/apps/documenteditor/main/resources/help/it/editor.css
+++ b/apps/documenteditor/main/resources/help/it/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/documenteditor/main/resources/help/ru/editor.css b/apps/documenteditor/main/resources/help/ru/editor.css
index ad8186615c..f4a9216317 100644
--- a/apps/documenteditor/main/resources/help/ru/editor.css
+++ b/apps/documenteditor/main/resources/help/ru/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/documenteditor/main/resources/help/scroll.css b/apps/documenteditor/main/resources/help/scroll.css
new file mode 100644
index 0000000000..c4ea4bce08
--- /dev/null
+++ b/apps/documenteditor/main/resources/help/scroll.css
@@ -0,0 +1,116 @@
+html{
+    overflow: scroll;
+    scrollbar-track-color:  #eee;
+    scrollbar-face-color: #f7f7f7;
+    scrollbar-highlight-color: #eee;
+    scrollbar-darkshadow-color: #cbcbcb;
+    scrollbar-arrow-color:  #adadad;
+    scrollbar-color: #f7f7f7 #eee;
+}
+
+::-webkit-scrollbar {
+    height: 14px;
+    width: 14px;
+    background: #eee;
+}
+
+::-webkit-scrollbar-corner {
+    background: #eee;
+}
+
+/* thimb*/
+::-webkit-scrollbar-thumb {
+    box-shadow: inset 0px 0px 0px 1px #cbcbcb;
+    background: #f7f7f7;
+    -webkit-border-radius: 0.1ex;
+    border: #eee 1px solid;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #c0c0c0;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-thumb:active {
+    background: #adadad;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-thumb:vertical
+{
+    border-width: 0 2px 0 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(192,192,192)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active
+{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px'  width='4px' fill='rgb(236,236,236)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:horizontal
+{
+    border-width: 0 0 2px 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(192,192,192)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active
+{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(236,236,236)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E");
+}
+
+/* buttons*/
+::-webkit-scrollbar-button:single-button {
+    height: 14px;
+    width: 14px;
+    box-shadow: inset 0px 0px 0px 1px #cbcbcb;
+    border: #eee 1px solid;
+    background-color: #f7f7f7;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-button:single-button:hover {
+    background-color: #c0c0c0;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-button:single-button:active {
+    background-color: #adadad;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-button:single-button:vertical {
+    border-right-width: 2px;
+    border-left-width: 0;
+}
+
+::-webkit-scrollbar-button:single-button:horizontal {
+    border-bottom-width: 2px;
+    border-top-width: 0px;
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(173, 173, 173)'><polygon points='4,0 0,4 8,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement:hover, ::-webkit-scrollbar-button:single-button:vertical:decrement:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(247, 247, 247)'><polygon points='4,0 0,4 8,4'/></svg>");
+}
+
+::-webkit-scrollbar-button:single-button:vertical:increment{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(173, 173, 173)'><polygon points='4,4 0,0 8,0'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:vertical:increment:hover, ::-webkit-scrollbar-button:single-button:vertical:increment:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(247, 274, 247)'><polygon points='4,4 0,0 8,0'/></svg>");
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:increment{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,0 0,8 4,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:increment:hover, ::-webkit-scrollbar-button:single-button:horizontal:increment:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,0 0,8 4,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,4 4,8 4,0'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement:hover, ::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,4 4,8 4,0'/></svg>");
+}
diff --git a/apps/presentationeditor/main/resources/help/de/editor.css b/apps/presentationeditor/main/resources/help/de/editor.css
index 3522727c43..9452c3de97 100644
--- a/apps/presentationeditor/main/resources/help/de/editor.css
+++ b/apps/presentationeditor/main/resources/help/de/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/presentationeditor/main/resources/help/en/editor.css b/apps/presentationeditor/main/resources/help/en/editor.css
index c560e98191..05d886262c 100644
--- a/apps/presentationeditor/main/resources/help/en/editor.css
+++ b/apps/presentationeditor/main/resources/help/en/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/presentationeditor/main/resources/help/es/editor.css b/apps/presentationeditor/main/resources/help/es/editor.css
index 3522727c43..9452c3de97 100644
--- a/apps/presentationeditor/main/resources/help/es/editor.css
+++ b/apps/presentationeditor/main/resources/help/es/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/presentationeditor/main/resources/help/fr/editor.css b/apps/presentationeditor/main/resources/help/fr/editor.css
index 7ef863d129..bb845e934e 100644
--- a/apps/presentationeditor/main/resources/help/fr/editor.css
+++ b/apps/presentationeditor/main/resources/help/fr/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/presentationeditor/main/resources/help/it/editor.css b/apps/presentationeditor/main/resources/help/it/editor.css
index 9df9b6e12f..ae79f29754 100644
--- a/apps/presentationeditor/main/resources/help/it/editor.css
+++ b/apps/presentationeditor/main/resources/help/it/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/presentationeditor/main/resources/help/ru/editor.css b/apps/presentationeditor/main/resources/help/ru/editor.css
index c560e98191..05d886262c 100644
--- a/apps/presentationeditor/main/resources/help/ru/editor.css
+++ b/apps/presentationeditor/main/resources/help/ru/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/presentationeditor/main/resources/help/scroll.css b/apps/presentationeditor/main/resources/help/scroll.css
new file mode 100644
index 0000000000..c4ea4bce08
--- /dev/null
+++ b/apps/presentationeditor/main/resources/help/scroll.css
@@ -0,0 +1,116 @@
+html{
+    overflow: scroll;
+    scrollbar-track-color:  #eee;
+    scrollbar-face-color: #f7f7f7;
+    scrollbar-highlight-color: #eee;
+    scrollbar-darkshadow-color: #cbcbcb;
+    scrollbar-arrow-color:  #adadad;
+    scrollbar-color: #f7f7f7 #eee;
+}
+
+::-webkit-scrollbar {
+    height: 14px;
+    width: 14px;
+    background: #eee;
+}
+
+::-webkit-scrollbar-corner {
+    background: #eee;
+}
+
+/* thimb*/
+::-webkit-scrollbar-thumb {
+    box-shadow: inset 0px 0px 0px 1px #cbcbcb;
+    background: #f7f7f7;
+    -webkit-border-radius: 0.1ex;
+    border: #eee 1px solid;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #c0c0c0;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-thumb:active {
+    background: #adadad;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-thumb:vertical
+{
+    border-width: 0 2px 0 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(192,192,192)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active
+{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px'  width='4px' fill='rgb(236,236,236)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:horizontal
+{
+    border-width: 0 0 2px 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(192,192,192)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active
+{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(236,236,236)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E");
+}
+
+/* buttons*/
+::-webkit-scrollbar-button:single-button {
+    height: 14px;
+    width: 14px;
+    box-shadow: inset 0px 0px 0px 1px #cbcbcb;
+    border: #eee 1px solid;
+    background-color: #f7f7f7;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-button:single-button:hover {
+    background-color: #c0c0c0;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-button:single-button:active {
+    background-color: #adadad;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-button:single-button:vertical {
+    border-right-width: 2px;
+    border-left-width: 0;
+}
+
+::-webkit-scrollbar-button:single-button:horizontal {
+    border-bottom-width: 2px;
+    border-top-width: 0px;
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(173, 173, 173)'><polygon points='4,0 0,4 8,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement:hover, ::-webkit-scrollbar-button:single-button:vertical:decrement:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(247, 247, 247)'><polygon points='4,0 0,4 8,4'/></svg>");
+}
+
+::-webkit-scrollbar-button:single-button:vertical:increment{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(173, 173, 173)'><polygon points='4,4 0,0 8,0'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:vertical:increment:hover, ::-webkit-scrollbar-button:single-button:vertical:increment:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(247, 274, 247)'><polygon points='4,4 0,0 8,0'/></svg>");
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:increment{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,0 0,8 4,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:increment:hover, ::-webkit-scrollbar-button:single-button:horizontal:increment:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,0 0,8 4,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,4 4,8 4,0'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement:hover, ::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,4 4,8 4,0'/></svg>");
+}
diff --git a/apps/spreadsheeteditor/main/resources/help/de/editor.css b/apps/spreadsheeteditor/main/resources/help/de/editor.css
index 7ef863d129..bb845e934e 100644
--- a/apps/spreadsheeteditor/main/resources/help/de/editor.css
+++ b/apps/spreadsheeteditor/main/resources/help/de/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/spreadsheeteditor/main/resources/help/en/editor.css b/apps/spreadsheeteditor/main/resources/help/en/editor.css
index c560e98191..05d886262c 100644
--- a/apps/spreadsheeteditor/main/resources/help/en/editor.css
+++ b/apps/spreadsheeteditor/main/resources/help/en/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/spreadsheeteditor/main/resources/help/es/editor.css b/apps/spreadsheeteditor/main/resources/help/es/editor.css
index 7ef863d129..bb845e934e 100644
--- a/apps/spreadsheeteditor/main/resources/help/es/editor.css
+++ b/apps/spreadsheeteditor/main/resources/help/es/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/spreadsheeteditor/main/resources/help/fr/editor.css b/apps/spreadsheeteditor/main/resources/help/fr/editor.css
index 3522727c43..9452c3de97 100644
--- a/apps/spreadsheeteditor/main/resources/help/fr/editor.css
+++ b/apps/spreadsheeteditor/main/resources/help/fr/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/spreadsheeteditor/main/resources/help/it/editor.css b/apps/spreadsheeteditor/main/resources/help/it/editor.css
index 9df9b6e12f..ae79f29754 100644
--- a/apps/spreadsheeteditor/main/resources/help/it/editor.css
+++ b/apps/spreadsheeteditor/main/resources/help/it/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/spreadsheeteditor/main/resources/help/ru/editor.css b/apps/spreadsheeteditor/main/resources/help/ru/editor.css
index c560e98191..05d886262c 100644
--- a/apps/spreadsheeteditor/main/resources/help/ru/editor.css
+++ b/apps/spreadsheeteditor/main/resources/help/ru/editor.css
@@ -1,4 +1,5 @@
-body
+@import "../scroll.css";
+body
 {
 font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
 font-size: 12px;
diff --git a/apps/spreadsheeteditor/main/resources/help/scroll.css b/apps/spreadsheeteditor/main/resources/help/scroll.css
new file mode 100644
index 0000000000..c4ea4bce08
--- /dev/null
+++ b/apps/spreadsheeteditor/main/resources/help/scroll.css
@@ -0,0 +1,116 @@
+html{
+    overflow: scroll;
+    scrollbar-track-color:  #eee;
+    scrollbar-face-color: #f7f7f7;
+    scrollbar-highlight-color: #eee;
+    scrollbar-darkshadow-color: #cbcbcb;
+    scrollbar-arrow-color:  #adadad;
+    scrollbar-color: #f7f7f7 #eee;
+}
+
+::-webkit-scrollbar {
+    height: 14px;
+    width: 14px;
+    background: #eee;
+}
+
+::-webkit-scrollbar-corner {
+    background: #eee;
+}
+
+/* thimb*/
+::-webkit-scrollbar-thumb {
+    box-shadow: inset 0px 0px 0px 1px #cbcbcb;
+    background: #f7f7f7;
+    -webkit-border-radius: 0.1ex;
+    border: #eee 1px solid;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #c0c0c0;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-thumb:active {
+    background: #adadad;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-thumb:vertical
+{
+    border-width: 0 2px 0 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(192,192,192)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active
+{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px'  width='4px' fill='rgb(236,236,236)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:horizontal
+{
+    border-width: 0 0 2px 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(192,192,192)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E");
+}
+::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active
+{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(236,236,236)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E");
+}
+
+/* buttons*/
+::-webkit-scrollbar-button:single-button {
+    height: 14px;
+    width: 14px;
+    box-shadow: inset 0px 0px 0px 1px #cbcbcb;
+    border: #eee 1px solid;
+    background-color: #f7f7f7;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-button:single-button:hover {
+    background-color: #c0c0c0;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+::-webkit-scrollbar-button:single-button:active {
+    background-color: #adadad;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+::-webkit-scrollbar-button:single-button:vertical {
+    border-right-width: 2px;
+    border-left-width: 0;
+}
+
+::-webkit-scrollbar-button:single-button:horizontal {
+    border-bottom-width: 2px;
+    border-top-width: 0px;
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(173, 173, 173)'><polygon points='4,0 0,4 8,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement:hover, ::-webkit-scrollbar-button:single-button:vertical:decrement:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(247, 247, 247)'><polygon points='4,0 0,4 8,4'/></svg>");
+}
+
+::-webkit-scrollbar-button:single-button:vertical:increment{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(173, 173, 173)'><polygon points='4,4 0,0 8,0'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:vertical:increment:hover, ::-webkit-scrollbar-button:single-button:vertical:increment:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4px' fill='rgb(247, 274, 247)'><polygon points='4,4 0,0 8,0'/></svg>");
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:increment{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,0 0,8 4,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:increment:hover, ::-webkit-scrollbar-button:single-button:horizontal:increment:active{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,0 0,8 4,4'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement{
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,4 4,8 4,0'/></svg>");
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement:hover, ::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,4 4,8 4,0'/></svg>");
+}