diff --git a/exports/scrollpanel.d.ts b/exports/scrollpanel.d.ts
new file mode 100644
index 000000000..d71fe46c2
--- /dev/null
+++ b/exports/scrollpanel.d.ts
@@ -0,0 +1 @@
+export * from './components/scrollpanel/ScrollPanel';
\ No newline at end of file
diff --git a/exports/scrollpanel.js b/exports/scrollpanel.js
new file mode 100644
index 000000000..61c699d49
--- /dev/null
+++ b/exports/scrollpanel.js
@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/scrollpanel/ScrollPanel.vue');
+            
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4599eb1bf..dbdac3ef6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,12 +2,6 @@
 <html lang="en">
 
     <head>
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-93461466-1"></script>
-        <script>
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-        </script>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
diff --git a/src/App.vue b/src/App.vue
index 80cb09b5e..ede0731fb 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,12 +49,6 @@ export default {
         $route: {
             immediate: true,
             handler(to) {
-                let route = window.location.href.split('/#')[1];
-                if (to.path === route) {
-                    window['gtag']('config', 'UA-93461466-1', {
-                        'page_path': '/primevue' + to.path
-                    });
-                }
                 this.sidebarActive = false;
                 this.$toast.removeAllGroups();
             }
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 0e717b78e..04a5a55aa 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -152,6 +152,7 @@
                 <router-link to="/deferredcontent">Deferred</router-link>
                 <router-link to="/fieldset">Fieldset</router-link>
                 <router-link to="/panel">Panel</router-link>
+                <router-link to="/scrollpanel">ScrollPanel</router-link>
                 <router-link to="/tabview">TabView</router-link>
                 <router-link to="/toolbar">Toolbar</router-link>
             </div>
diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index 86f7972b9..1d8031952 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -93,6 +93,10 @@
                 text-decoration: none;
                 color: $linkColor;
                 font-weight: 500;
+
+                &:hover {
+                    text-decoration: underline;
+                }
             }
 
             p {
@@ -152,6 +156,10 @@
                                 transition: background-color .2s, box-shadow .2s;
                                 box-shadow: 0 0 0 0.2em $focusBorderColor;
                             }
+
+                            &:hover {
+                                text-decoration: none;
+                            }
                         }
 
                         &.p-highlight a,
@@ -180,6 +188,10 @@
                         text-decoration: none;
                         color: $linkColor;
                         font-weight: 500;
+
+                        &:hover {
+                            text-decoration: underline;
+                        }
                     }
                 }
             }
diff --git a/src/components/scrollpanel/ScrollPanel.d.ts b/src/components/scrollpanel/ScrollPanel.d.ts
new file mode 100644
index 000000000..9ac96c88c
--- /dev/null
+++ b/src/components/scrollpanel/ScrollPanel.d.ts
@@ -0,0 +1,7 @@
+import Vue, {VNode} from 'vue';
+
+export declare class ScrollPanel extends Vue {
+    $slots: {
+        '': VNode[];
+    }
+}
\ No newline at end of file
diff --git a/src/components/scrollpanel/ScrollPanel.vue b/src/components/scrollpanel/ScrollPanel.vue
new file mode 100644
index 000000000..e6bbf980c
--- /dev/null
+++ b/src/components/scrollpanel/ScrollPanel.vue
@@ -0,0 +1,263 @@
+<template>
+    <div class="p-scrollpanel p-component">
+        <div class="p-scrollpanel-wrapper">
+            <div ref="content" class="p-scrollpanel-content" @scroll="moveBar" @mouseenter="moveBar">
+                <slot></slot>
+            </div>
+        </div>
+        <div ref="xBar" class="p-scrollpanel-bar p-scrollpanel-bar-x" @mousedown="onXBarMouseDown"></div>
+        <div ref="yBar" class="p-scrollpanel-bar p-scrollpanel-bar-y" @mousedown="onYBarMouseDown"></div>
+    </div>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    initialized: false,
+    documentResizeListener: null,
+    documentMouseMoveListener: null,
+    documentMouseUpListener: null,
+    frame: null,
+    scrollXRatio: null,
+    scrollYRatio: null,
+    isXBarClicked: false,
+    isYBarClicked: false,
+    lastPageX: null,
+    lastPageY: null,
+    mounted() {
+        if (this.$el.offsetParent) {
+            this.initialize();
+        }
+    },
+    updated() {
+        if (!this.initialized && this.$el.offsetParent) {
+            this.initialize();
+        }
+    },
+    beforeDestroy() {
+        this.unbindDocumentResizeListener();
+
+        if (this.frame) {
+            window.cancelAnimationFrame(this.frame);
+        }
+    },
+    methods: {
+        initialize() {
+            this.moveBar();
+            this.bindDocumentResizeListener();
+            this.calculateContainerHeight();
+        },
+        calculateContainerHeight() {
+            let containerStyles = getComputedStyle(this.$el),
+            xBarStyles = getComputedStyle(this.$refs.xBar),
+            pureContainerHeight = DomHandler.getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
+
+            if (containerStyles['max-height'] !== "none" && pureContainerHeight === 0) {
+                if(this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
+                    this.$el.style.height = containerStyles['max-height'];
+                }
+                else {
+                    this.$el.style.height = this.$refs.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
+                }
+            }
+        },
+        moveBar() {
+            /* horizontal scroll */
+            let totalWidth = this.$refs.content.scrollWidth;
+            let ownWidth = this.$refs.content.clientWidth;
+            let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
+
+            this.scrollXRatio = ownWidth / totalWidth;
+
+            /* vertical scroll */
+            let totalHeight = this.$refs.content.scrollHeight;
+            let ownHeight = this.$refs.content.clientHeight;
+            let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
+
+            this.scrollYRatio = ownHeight / totalHeight;
+
+            this.frame = this.requestAnimationFrame(() => {
+                if (this.scrollXRatio >= 1) {
+                    DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                }
+                else {
+                    DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                    this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                }
+
+                if (this.scrollYRatio >= 1) {
+                    DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                }
+                else {
+                    DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                    this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                }
+            });
+        },
+        onYBarMouseDown(e) {
+            this.isYBarClicked = true;
+            this.lastPageY = e.pageY;
+            DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
+            DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+
+            this.bindDocumentMouseListeners();
+            e.preventDefault();
+        },
+        onXBarMouseDown(e) {
+            this.isXBarClicked = true;
+            this.lastPageX = e.pageX;
+            DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
+            DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+
+            this.bindDocumentMouseListeners();
+            e.preventDefault();
+        },
+        onDocumentMouseMove(e) {
+            if (this.isXBarClicked) {
+                this.onMouseMoveForXBar(e);
+            }
+            else if (this.isYBarClicked) {
+                this.onMouseMoveForYBar(e);
+            }
+            else {
+                this.onMouseMoveForXBar(e);
+                this.onMouseMoveForYBar(e);
+            }
+        },
+        onMouseMoveForXBar(e) {
+            let deltaX = e.pageX - this.lastPageX;
+            this.lastPageX = e.pageX;
+
+            this.frame = this.requestAnimationFrame(() => {
+                this.$refs.content.scrollLeft += deltaX / this.scrollXRatio;
+            });
+        },
+        onMouseMoveForYBar(e) {
+            let deltaY = e.pageY - this.lastPageY;
+            this.lastPageY = e.pageY;
+
+            this.frame = this.requestAnimationFrame(() => {
+                this.$refs.content.scrollTop += deltaY / this.scrollYRatio;
+            });
+        },
+        onDocumentMouseUp() {
+            DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
+            DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
+            DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
+
+            this.unbindDocumentMouseListeners();
+            this.isXBarClicked = false;
+            this.isYBarClicked = false;
+        },
+        requestAnimationFrame(f) {
+            let frame = window.requestAnimationFrame || this.timeoutFrame;
+            frame(f);
+        },
+        refresh() {
+            this.moveBar();
+        },
+        scrollTop(scrollTop) {
+            let scrollableHeight = this.$refs.content.scrollHeight - this.$refs.content.clientHeight;
+            scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
+            this.$refs.contentscrollTop = scrollTop;
+        },
+        bindDocumentMouseListeners() {
+			if (!this.documentMouseMoveListener) {
+				this.documentMouseMoveListener = (e) => {
+					this.onDocumentMouseMove(e);
+				};
+
+				document.addEventListener('mousemove', this.documentMouseMoveListener);
+            }
+
+            if (!this.documentMouseUpListener) {
+				this.documentMouseUpListener = (e) => {
+					this.onDocumentMouseUp(e);
+				};
+
+				document.addEventListener('mouseup', this.documentMouseUpListener);
+			}
+		},
+		unbindDocumentMouseListeners() {
+			if (this.documentMouseMoveListener) {
+				document.removeEventListener('mousemove', this.documentMouseMoveListener);
+				this.documentMouseMoveListener = null;
+            }
+
+            if(this.documentMouseUpListener) {
+				document.removeEventListener('mouseup', this.documentMouseUpListener);
+				this.documentMouseUpListener = null;
+			}
+		},
+        bindDocumentResizeListener() {
+			if (!this.documentResizeListener) {
+				this.documentResizeListener = () => {
+					this.moveBar();
+				};
+
+				window.addEventListener('resize', this.documentResizeListener);
+			}
+		},
+		unbindDocumentResizeListener() {
+			if(this.documentResizeListener) {
+				window.removeEventListener('resize', this.documentResizeListener);
+				this.documentResizeListener = null;
+			}
+		}
+    }
+}
+</script>
+
+<style>
+.p-scrollpanel-wrapper {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    float: left;
+}
+
+.p-scrollpanel-content {
+    height: calc(100% + 18px);
+    width: calc(100% + 18px);
+    padding: 0 18px 18px 0;
+    position: relative;
+    overflow: auto;
+    box-sizing: border-box;
+}
+
+.p-scrollpanel-bar {
+    position: relative;
+    background: #c1c1c1;
+    border-radius: 3px;
+    z-index: 2;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.25s linear;
+}
+
+.p-scrollpanel-bar-y {
+    width: 9px;
+    top: 0;
+}
+
+.p-scrollpanel-bar-x {
+    height: 9px;
+    bottom: 0;
+}
+
+.p-scrollpanel-hidden {
+    visibility: hidden;
+}
+
+.p-scrollpanel:hover .p-scrollpanel-bar,
+.p-scrollpanel:active .p-scrollpanel-bar {
+    opacity: 1;
+}
+
+.p-scrollpanel-grabbed {
+    user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 69d229733..380195139 100644
--- a/src/main.js
+++ b/src/main.js
@@ -52,6 +52,7 @@ import ProgressSpinner from './components/progressspinner/ProgressSpinner';
 import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
 import Row from './components/row/Row';
+import ScrollPanel from './components/scrollpanel/ScrollPanel';
 import SelectButton from './components/selectbutton/SelectButton';
 import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
@@ -141,6 +142,7 @@ Vue.component('ProgressSpinner', ProgressSpinner);
 Vue.component('RadioButton', RadioButton);
 Vue.component('Rating', Rating);
 Vue.component('Row', Row);
+Vue.component('ScrollPanel', ScrollPanel);
 Vue.component('SelectButton', SelectButton);
 Vue.component('Slider', Slider);
 Vue.component('Sidebar', Sidebar);
diff --git a/src/router.js b/src/router.js
index 807a63c22..8c02614c9 100755
--- a/src/router.js
+++ b/src/router.js
@@ -435,7 +435,12 @@ export default new Router({
 			path: '/rating',
 			name: 'rating',
 			component: () => import('./views/rating/RatingDemo.vue')
-		},
+        },
+        {
+			path: '/scrollpanel',
+			name: 'scrollpanel',
+			component: () => import('./views/scrollpanel/ScrollPanelDemo.vue')
+        },
 		{
 			path: '/selectbutton',
 			name: 'selectbutton',
diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
new file mode 100644
index 000000000..880bd6076
--- /dev/null
+++ b/src/views/scrollpanel/ScrollPanelDemo.vue
@@ -0,0 +1,117 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ScrollPanel</h1>
+                <p>ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <ScrollPanel style="width: 100%; height: 200px">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Vitae et leo duis ut diam.
+                            Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                            Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                            Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                            Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                            Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                            Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                            Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                            Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                            Mattis aliquam faucibus purus in massa tempor nec.
+                        </p>
+                    </ScrollPanel>
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <ScrollPanel style="width: 100%; height: 200px" class="custombar1">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Vitae et leo duis ut diam.
+                            Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                            Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                            Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                            Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                            Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                            Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                            Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                            Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                            Mattis aliquam faucibus purus in massa tempor nec.
+                        </p>
+                    </ScrollPanel>
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <ScrollPanel style="width: 100%; height: 200px" class="custombar2">
+                        <p style="width: 600px">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Vitae et leo duis ut diam.
+                            Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                            Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                            Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                            Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                            Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                            Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                            Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                            Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                            Mattis aliquam faucibus purus in massa tempor nec.
+                        </p>
+                    </ScrollPanel>
+                </div>
+            </div>
+        </div>
+
+        <ScrollPanelDoc />
+    </div>
+</template>
+<script>
+import ScrollPanelDoc from './ScrollPanelDoc';
+
+export default {
+    components: {
+        'ScrollPanelDoc': ScrollPanelDoc
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ .p-scrollpanel {
+    p {
+        padding: .5rem;
+        line-height: 1.5;
+        margin: 0;
+    }
+
+    &.custombar1 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--layer-1);
+        }
+
+        .p-scrollpanel-bar {
+            background-color: var(--primary-color);
+            opacity: 1;
+            transition: background-color .2s;
+
+            &:hover {
+                background-color: #007ad9;
+            }
+        }
+    }
+
+    &.custombar2 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--layer-1);
+            border-bottom: 9px solid var(--layer-1);
+        }
+
+        .p-scrollpanel-bar {
+            background-color: var(--layer-2);
+            border-radius: 0;
+            opacity: 1;
+            transition: background-color .2s;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
new file mode 100644
index 000000000..e905992fe
--- /dev/null
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -0,0 +1,199 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import ScrollPanel from 'primevue/scrollpanel';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>ScrollPanel usage is similar to any container element.</p>
+<CodeHighlight>
+&lt;ScrollPanel style="width: 100%; height: 200px"&gt;
+    content
+&lt;/ScrollPanel&gt;
+</CodeHighlight>
+
+                <h3>Customization</h3>
+                <p>Look and feel can easily be customized, here is an example with custom scrollbars.</p>
+<CodeHighlight>
+&lt;ScrollPanel style="width: 100%; height: 200px" class="custom"&gt;
+    content
+&lt;/ScrollPanel&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.custom .p-scrollpanel-wrapper {
+    border-right: 9px solid #f4f4f4;
+}
+
+.custom .p-scrollpanel-bar {
+    background-color: #1976d2;
+    opacity: 1;
+    transition: background-color .3s;
+}
+
+.custom .p-scrollpanel-bar:hover {
+    background-color: #135ba1;
+}
+</CodeHighlight>
+
+				<h3>Properties</h3>
+                <p>Any property such as style and class are passed to the main container element. There are no component specific properties.</p>
+				
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-scrollpanel</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-scrollpanel-wrapper</td>
+                                <td>Wrapper of content section.</td>
+                            </tr>
+                            <tr>
+                                <td>p-scrollpanel-content</td>
+                                <td>Content section.</td>
+                            </tr>
+                            <tr>
+                                <td>p-scrollpanel-bar</td>
+                                <td>Scrollbar handle.</td>
+                            </tr>
+                            <tr>
+                                <td>p-scrollpanel-bar-x</td>
+                                <td>Scrollbar handle of a horizontal bar.</td>
+                            </tr>
+                            <tr>
+                                <td>p-scrollpanel-bar-y</td>
+                                <td>Scrollbar handle of a vertical bar</td>
+                            </tr>
+                        </tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrollpanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-grid"&gt;
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;ScrollPanel style="width: 100%; height: 200px"&gt;
+            &lt;p&gt;
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Vitae et leo duis ut diam.
+                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                Mattis aliquam faucibus purus in massa tempor nec.
+            &lt;/p&gt;
+        &lt;/ScrollPanel&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;ScrollPanel style="width: 100%; height: 200px" class="custombar1"&gt;
+            &lt;p&gt;
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Vitae et leo duis ut diam.
+                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                Mattis aliquam faucibus purus in massa tempor nec.
+            &lt;/p&gt;
+        &lt;/ScrollPanel&gt;
+    &lt;/div&gt;
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;ScrollPanel style="width: 100%; height: 200px" class="custombar2"&gt;
+            &lt;p style="width: 600px"&gt;
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Vitae et leo duis ut diam.
+                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                Mattis aliquam faucibus purus in massa tempor nec.
+            &lt;/p&gt;
+        &lt;/ScrollPanel&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+export default {
+    
+}
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+/deep/ .p-scrollpanel {
+    p {
+        padding: .5rem;
+        line-height: 1.5;
+        margin: 0;
+    }
+
+    &.custombar1 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--layer-1);
+        }
+
+        .p-scrollpanel-bar {
+            background-color: var(--primary-color);
+            opacity: 1;
+            transition: background-color .2s;
+
+            &:hover {
+                background-color: #007ad9;
+            }
+        }
+    }
+
+    &.custombar2 {
+        .p-scrollpanel-wrapper {
+            border-right: 9px solid var(--layer-1);
+            border-bottom: 9px solid var(--layer-1);
+        }
+
+        .p-scrollpanel-bar {
+            background-color: var(--layer-2);
+            border-radius: 0;
+            opacity: 1;
+            transition: background-color .2s;
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file

Name	Element
p-scrollpanel	Container element.
p-scrollpanel-wrapper	Wrapper of content section.
p-scrollpanel-content	Content section.
p-scrollpanel-bar	Scrollbar handle.
p-scrollpanel-bar-x	Scrollbar handle of a horizontal bar.
p-scrollpanel-bar-y	Scrollbar handle of a vertical bar