My intention is to hide my scrollbar (i.e, hidden by SLIDING TO THE RIGHT), after scrolling (let's say, like 2 or 3 seconds after I'm done scrolling)
And to make it visible again, soon as I start scrolling (i.e, visible by SLIDING IN FROM THE RIGHT)
VIEW CODE SNIPPET:
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollbar hide/show on scroll</title>
</head>
<style>
div::-webkit-scrollbar{
width: 8px;
}
div::-webkit-scrollbar-track{
background-color: #444444;
}
div::-webkit-scrollbar-button:vertical:increment{
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-button:vertical:decrement{
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-thumb{
background-color: rgba(108, 92, 231, 0.7);
border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover{
background-color: rgba(108, 92, 231, 1);
}
div{
width: 500px;
height: 300px;
background-color: #ececec;
overflow: auto;
}
</style>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Hic quisquam beatae explicabo dolorem perferendis aspernatur iste consequuntur voluptatibus non possimus officia, vitae nisi, distinctio ipsa ex, tempora soluta facilis sint aut. Saepe veritatis dolores, laboriosam laudantium incidunt, eos ipsa non explicabo, at eveniet dolorem accusantium aliquam soluta sed aspernatur! Beatae perspiciatis praesentium odit libero est qui repudiandae eveniet accusamus fugiat exercitationem maxime ipsam quo laudantium, quaerat voluptas illum ipsum eligendi dolore autem quos iusto placeat facere distinctio possimus. Voluptatum exercitationem saepe non error debitis commodi quidem corporis quisquam laudantium consequuntur. Aperiam, nisi nemo esse similique dicta aliquid. Aut, assumenda, voluptatibus. Iste voluptatum et, aliquam maxime nisi! Distinctio aspernatur saepe, repellat harum non ad ex, voluptate odit sunt maxime, rem nihil necessitatibus quia molestias, quo provident vitae doloribus suscipit illum? Fugiat, vero dolore quam recusandae tenetur doloribus repellat voluptates rem repudiandae nemo iusto, officia libero minus, labore culpa sapiente ab voluptatibus illum similique ipsam obcaecati cupiditate. Sunt, officia suscipit eum nemo. Ex vero fugit, magnam, dolorum voluptatem neque corporis quas aperiam laborum. Eos impedit perferendis unde quis nihil voluptate nobis distinctio! Veniam architecto, qui, ut perspiciatis iste iusto optio aliquid eius asperiores ex quae, nihil suscipit eaque dignissimos quas cumque similique cum laborum dolores temporibus aspernatur consequatur sint sunt ipsa? Culpa adipisci placeat porro delectus assumenda nemo error sint quia, laudantium molestias ipsam quidem dolorum officia nostrum libero, dignissimos, ipsum, commodi. Quae consectetur ratione eaque commodi at molestias quam debitis velit. Necessitatibus obcaecati quisquam vitae doloribus eaque. Ducimus expedita odit eligendi, nostrum nisi, consectetur error voluptatibus suscipit mollitia aliquid rem earum, unde. Quod, distinctio? Ipsa, itaque, aut repellat iste officia ullam fugit, nostrum numquam voluptatem expedita tempore quo, eum reprehenderit excepturi tempora natus. Iusto consequuntur, quam sit ab dolorem, fugit perspiciatis eveniet, est temporibus esse magni sapiente numquam nostrum doloribus ea odit recusandae repudiandae quo quasi quae nemo. Nulla sunt unde, quasi odit sint officia. Sit eum accusamus eligendi consequuntur nesciunt ullam reiciendis voluptates cum explicabo laudantium doloribus vero amet nisi voluptatum pariatur molestiae impedit, consequatur delectus in rerum sequi aliquam. Esse facilis aliquam consequuntur, explicabo deserunt, vel aspernatur necessitatibus aut asperiores iusto. Rerum, officiis earum quos, tempora ut illum tempore voluptatibus, praesentium modi suscipit aperiam. Corporis in, minus voluptatem dolores. Saepe repellendus repudiandae nisi odit consequatur quis possimus perspiciatis at, eos suscipit laborum cupiditate qui impedit, illum eligendi enim reprehenderit ducimus natus error ullam delectus voluptatibus eveniet est odio? Possimus et sint quam fugiat nemo ex molestias recusandae repudiandae similique nihil minus sunt quaerat culpa, temporibus architecto quasi excepturi eveniet dolore deserunt ad iure! Repellat sed exercitationem, ratione tempore reprehenderit maiores, voluptatibus, unde error et, nam voluptatem quae aut commodi delectus odit id. Similique quo saepe eaque, atque repellat maiores nostrum asperiores deleniti autem impedit incidunt numquam distinctio culpa ab reprehenderit ad fugit placeat, totam quia sit rem, omnis voluptatibus necessitatibus alias. Impedit dicta dolore, sapiente saepe, nostrum repellendus. Corporis vel aspernatur neque natus necessitatibus dolorem laboriosam provident veniam dolor, fugiat eius consectetur soluta aut dolore sunt minus nesciunt consequuntur perspiciatis maiores, quia voluptatem beatae modi quas at doloremque. Tenetur fugiat blanditiis dolore deserunt saepe ut, distinctio similique adipisci excepturi labore in, nulla, necessitatibus facere iure exercitationem. Aliquam aperiam doloremque aspernatur, voluptatem obcaecati placeat, illo delectus pariatur animi hic vero labore tempore ipsam numquam rerum dolorem doloribus et inventore sequi iusto quae quaerat, dolorum dignissimos! Quas, id? Sed, vitae aliquid! Vitae sint error soluta adipisci voluptatum deserunt veritatis porro velit cupiditate unde et dignissimos accusantium ad, tempora culpa, eveniet, maiores illum! Adipisci minus sunt voluptas aut eos quasi quo, ipsum aspernatur optio reiciendis eveniet nam vero ut iste aliquam perspiciatis!
</div>
</body>
</html>
What I have tried:
Climbing Mt. Everest, swimming in the arctic ocean, walking through fire and flying to the moon. All to no avail.
:)
Submit an article or tip