mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-17 08:09:40 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
c6fd52c2c91bb180808e0d1ec99848edc4aabe9f
OverlayScrollbars/docs/v1/index.dev.html
T
Rene Haas d43ddb328a change website
2022-11-12 12:07:19 +01:00

390 lines
15 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="description"
content="A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars."
/>
<meta name="theme-color" content="#36befd" />
<meta name="msapplication-TileColor" content="#36befd" />
<meta name="msapplication-navbutton-color" content="#36befd" />
<meta name="application-name" content="Overlay Scrollbars" />
<meta name="msapplication-tooltip" content="Overlay Scrollbars" />
<meta name="apple-mobile-web-app-title" content="Overlay Scrollbars" />
<meta
name="viewport"
content="width=800, initial-scale=1.0, user-scalable=yes"
/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>
Overlay Scrollbars - Javascript scrollbar plugin which hides the native
scrollbars and provides custom styleable overlay scrollbars.
</title>
<!-- Google Scheme Markup as JSON-LD -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "SoftwareSourceCode",
"url": "https://kingsora.github.io/OverlayScrollbars",
"name": "Overlay Scrollbars",
"description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.",
"disambiguatingDescription": "javascript overlay scrollbars plugin",
"license": "https://en.wikipedia.org/wiki/MIT_License",
"keywords": "js,javascript,OverlayScrollbars,overlay,scrollbars,custom,scrollbar,plugin,jquery,scrollbars,polyfill",
"isAccessibleForFree": true,
"image": "https://kingsora.github.io/OverlayScrollbars/img/logo.png",
"codeRepository": "https://github.com/KingSora/OverlayScrollbars",
"programmingLanguage": {
"@type": "ComputerLanguage",
"name": "javascript",
"alternateName": "js"
}
}
</script>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<!-- 3rd Party CSS -->
<link
type="text/css"
href="./_framework/plugins/css/highlightjs/sora.css"
rel="stylesheet"
/>
<link
type="text/css"
href="./_framework/plugins/css/codemirror/codemirror.css"
rel="stylesheet"
/>
<link
type="text/css"
href="./_framework/plugins/css/tippy/tippy.css"
rel="stylesheet"
/>
<!-- 3rd Party JS -->
<script
type="text/javascript"
src="./_framework/plugins/js/jquery.min.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/jquery.raf.min.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/jquery.easing.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/day.min.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/tippy.min.js"
></script>
<!--[if gte IE 9]><!-->
<script
type="text/javascript"
src="./_framework/plugins/js/highlight.min.js"
></script>
<!--<![endif]-->
<script
type="text/javascript"
src="./_framework/plugins/js/signals.min.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/hasher.min.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/codemirror/codemirror.min.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/codemirror/mode/javascript.min.js"
></script>
<script
type="text/javascript"
src="./_framework/plugins/js/viewport-units-buggyfill.min.js"
></script>
<!-- main CSS -->
<link
type="text/css"
href="./_framework/css/OverlayScrollbars.css"
rel="stylesheet"
/>
<link
type="text/css"
href="etc/os-theme-minimal-dark.css"
rel="stylesheet"
/>
<link
type="text/css"
href="etc/os-theme-minimal-light.css"
rel="stylesheet"
/>
<link type="text/css" href="etc/os-theme-thin-dark.css" rel="stylesheet" />
<link type="text/css" href="etc/os-theme-thin-light.css" rel="stylesheet" />
<link type="text/css" href="etc/os-theme-thick-dark.css" rel="stylesheet" />
<link
type="text/css"
href="etc/os-theme-thick-light.css"
rel="stylesheet"
/>
<link type="text/css" href="etc/os-theme-round-dark.css" rel="stylesheet" />
<link
type="text/css"
href="etc/os-theme-round-light.css"
rel="stylesheet"
/>
<link type="text/css" href="etc/os-theme-block-dark.css" rel="stylesheet" />
<link
type="text/css"
href="etc/os-theme-block-light.css"
rel="stylesheet"
/>
<link
type="text/css"
href="https://fonts.googleapis.com/css?family=Raleway:400,600,700"
rel="stylesheet"
/>
<link
type="text/css"
href="https://fonts.googleapis.com/css?family=Fira+Mono:400,500"
rel="stylesheet"
/>
<link type="text/css" href="styles.min.css" rel="stylesheet" />
<!-- main JS -->
<script type="text/javascript" src="./_framework/js/framework.js"></script>
<script
type="text/javascript"
src="./_framework/js/OverlayScrollbars.js"
></script>
<script type="text/javascript" src="index.dev.js"></script>
</head>
<body>
<!--
<div id="div" class="os-host">
<div class="os-resize-observer-host"></div>
<div class="os-padding">
<div class="os-viewport">
<div class="os-content">
</div>
</div>
</div>
<div class="os-scrollbar os-scrollbar-horizontal ">
<div class="os-scrollbar-track">
<div class="os-scrollbar-handle"></div>
</div>
</div>
<div class="os-scrollbar os-scrollbar-vertical">
<div class="os-scrollbar-track">
<div class="os-scrollbar-handle"></div>
</div>
</div>
<div class="os-scrollbar-corner"></div>
</div>
<div class="os-host-textarea">
<div class="os-resize-observer-host"></div>
<div class="os-padding os-text-inherit">
<div class="os-viewport os-text-inherit">
<div class="os-content os-text-inherit">
<div class="os-textarea-cover"></div>
<textarea id="text" class="os-textarea os-text-inherit"></textarea>
</div>
</div>
</div>
<div class="os-scrollbar os-scrollbar-horizontal ">
<div class="os-scrollbar-track">
<div class="os-scrollbar-handle"></div>
</div>
</div>
<div class="os-scrollbar os-scrollbar-vertical">
<div class="os-scrollbar-track">
<div class="os-scrollbar-handle"></div>
</div>
</div>
<div class="os-scrollbar-corner"></div>
</div>
-->
<div id="header">
<div id="header-bg">
<span class="header-bg-decoration"></span>
<div class="header-bg-shining"></div>
<span class="header-bg-decoration"></span>
</div>
<div class="container">
<div class="header-content">
<h1 class="header-content-plugin-name">Overlay Scrollbars</h1>
<br />
<h2 class="header-content-plugin-description">
A javascript scrollbar plugin which hides native scrollbars,
provides<br />custom styleable overlay scrollbars and keeps the
native functionality and feeling.
</h2>
<br />
<a
href="https://github.com/KingSora/OverlayScrollbars/archive/master.zip"
class="header-content-download"
>
Download
</a>
</div>
</div>
<svg
id="header-edge"
width="1920px"
height="45px"
viewBox="0 0 1920 45"
enable-background="new 0 0 1920 45"
xml:space="preserve"
preserveAspectRatio="none"
>
<path
fill="#FFFFFF"
d="M960,44.5C592.556,44.5,127.279,11.928,0,0v44.5v37h1920v-37V0C1792.721,11.928,1327.444,44.5,960,44.5z"
/>
</svg>
</div>
<div id="navigation">
<div id="navigation-backdrop"></div>
<div id="navigation-menu" class="container">
<div class="navigation-menu-lr p-left"></div>
<div class="navigation-menu-lr p-right">
<div data-navigation="overview" class="navigation-menu-item">
Overview
</div>
<div data-navigation="demos" class="navigation-menu-item">Demos</div>
<div data-navigation="documentation" class="navigation-menu-item">
Documentation
</div>
<div data-navigation="themes" class="navigation-menu-item">
Themes
</div>
<div data-navigation="extensions" class="navigation-menu-item">
Extensions
</div>
<div data-navigation="faq" class="navigation-menu-item">FAQ</div>
<a
href="https://github.com/KingSora/OverlayScrollbars"
target="_blank"
rel="noopener"
class="navigation-menu-item"
><i class="mdi mdi-github-circle"></i
></a>
</div>
</div>
<div class="container">
<div id="navigation-button">
<div></div>
<div></div>
<div></div>
</div>
<svg
id="navigation-logo"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="702px"
height="468px"
viewBox="0 0 702 468"
enable-background="new 0 0 702 468"
xml:space="preserve"
>
>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="9" />
<feOffset dx="0" dy="2" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.11" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<g id="Stroke" style="filter: url(#dropshadow)">
<path
fill="none"
stroke="#fff"
stroke-width="48"
stroke-linecap="round"
stroke-miterlimit="10"
d="M234.014,337.502
c-9.188,0-18.292-1.193-27.057-3.545c-13.539-3.633-26.531-10.188-37.572-18.955c-10.933-8.682-20.222-19.736-26.863-31.969
c-6.813-12.549-11.024-26.725-12.18-40.996c-1.188-14.668,0.756-29.659,5.62-43.355c4.671-13.151,12.186-25.547,21.73-35.847
c9.515-10.269,21.266-18.694,33.982-24.368c13.146-5.865,27.781-8.966,42.325-8.966c3.586,0,7.203,0.184,10.75,0.547
c14.193,1.452,28.242,5.949,40.627,13.003c12.096,6.889,22.958,16.396,31.414,27.495c8.555,11.229,14.85,24.37,18.203,38.003
c3.509,14.265,3.951,29.467,1.278,43.964c-2.561,13.884-8.109,27.427-16.047,39.163c-7.806,11.541-18.112,21.643-29.805,29.211
c-11.912,7.709-25.592,12.986-39.562,15.258C245.323,337.045,239.656,337.502,234.014,337.502
C234.014,337.502,234.014,337.502,234.014,337.502z M570.998,338h-6.215h-26.65H500.59h-39.085h-31.278h-14.12
c-14.94,0-29.099,6.24-38.846,17.121c-12.376,13.813-16.449,33.305-10.63,50.865c6.084,18.361,22.291,32.152,41.292,35.137
c3.765,0.59,7.247,0.877,10.646,0.877h21.281h35.12h39.608h34.746h20.533c4.154,0,7.918-0.318,11.725-0.674
c11.898-1.107,23.729-4.436,35.166-9.893c21.475-10.246,38.934-27.695,49.156-49.133c10.625-22.271,12.957-47.695,6.57-71.588
c-6.066-22.697-19.951-42.912-39.094-56.922c-17.434-12.762-39.299-19.79-61.566-19.79h-19.836h-37.801h-34.63h-0.238
c-0.064,0-0.128,0-0.192,0c-7.594,0-14.766-0.01-20.863-1.207c-13.334-2.618-25.441-10.797-33.215-22.437
c-3.901-5.841-6.721-12.783-8.154-20.074c-1.492-7.591-0.939-15.579,1.642-23.742c4.497-14.223,14.729-25.905,28.074-32.053
c6.373-2.936,13.886-4.487,21.729-4.487h3.353h22.485h35.71h39.555h34.021h19.109c6.848,0,13.436-1.16,19.578-3.448
c16.672-6.206,29.244-20.975,32.814-38.542c3.609-17.757-2.477-36.397-15.879-48.646C649.65,30.746,637.154,26,623.891,26h-6.633
h-15.867h-23.605h-29.85h-34.594h-37.846h-39.599h-39.858h-38.619h-35.885h-31.655H263.95h-18.707h-9.988
c-13.158,0-23.905,0.728-33.822,2.288c-20.802,3.273-40.457,9.37-58.42,18.12c-18.023,8.778-34.679,20.118-49.506,33.705
c-14.775,13.541-27.499,29.094-37.814,46.228c-10.511,17.454-18.368,36.299-23.354,56.01c-5.159,20.397-7.188,41.485-6.027,62.679
c1.14,20.832,5.375,41.268,12.586,60.732c7.001,18.898,16.719,36.666,28.885,52.811c12.035,15.973,26.277,30.115,42.335,42.037
c16.245,12.059,34.087,21.652,53.04,28.514c19.537,7.074,39.766,11.68,60.63,12.662c3.03,0.145,6.092,0.215,9.211,0.215
c6.56,0,13.266-0.314,20.096-0.945c6.583-0.607,12.544-1.428,18.352-2.508c3.41-0.633,6.481-1.338,9.647-2.152"
/>
</g>
</svg>
</div>
<select id="navigation-content-navigation"></select>
</div>
<div id="content"></div>
<div id="footer">
<div class="container">
<div id="footer-left" class="footer-content">
Copyright © 2017-2019 <b>Rene Haas</b>. All rights reserved.
</div>
<div id="footer-right" class="footer-content"></div>
</div>
</div>
<div id="loading">
<div class="loading-inner">
<div class="loading-circle-wrapper">
<div class="loading-circle"></div>
</div>
</div>
</div>
<div id="modal-debug" class="modal" data-modal="debug" tabindex="-1">
<div class="modal-window">
<div class="modal-window-header">
<span>Debug</span>
<div class="modal-window-header-close">
<i class="mdi mdi-window-close"></i>
</div>
</div>
<div class="modal-window-content container">
<pre
id="modal-debug-content"
class="content-navigation-sub-caption"
></pre>
</div>
<div class="modal-window-footer"></div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink