| Server IP : 172.67.201.108 / Your IP : 216.73.216.68 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=PT+Serif:ital@0;1&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="https://bmsvieira.github.io/letmescroll.js/css/letmescroll.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Custom Scroll | Canvas</title>
<style>
.lms_scrollable {
max-width: 100%;
}
</style>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container">
<h2 class="text-center">Use Custom Scroll</h2>
<h4>Full width</h4>
<div class="canvas-custom-scroll border rounded mb-5" data-height="20rem">
<p class="p-4 mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore perferendis rerum, culpa accusamus eius autem repudiandae ad blanditiis quasi minus velit aut maiores ducimus laudantium sunt odit qui! Optio rem libero necessitatibus, autem nobis cum illo tempora eum, fugiat atque eligendi est facere quae aliquam commodi delectus ut dolorem officiis molestias tenetur ipsa, reprehenderit voluptatibus dignissimos? Atque, similique deserunt. Labore voluptas, obcaecati veniam corrupti ex dolor voluptatem perspiciatis commodi eos quo itaque minus. Ipsam, aspernatur? Mollitia sunt cupiditate consectetur dolorem a repellat vel quod odio adipisci illum quibusdam, explicabo id exercitationem corrupti, placeat sint reprehenderit est tempora saepe, at perspiciatis inventore officiis facilis omnis! Minima incidunt aliquam amet in voluptatibus ratione atque labore fuga tenetur nostrum, quaerat dolor necessitatibus architecto, beatae ab, similique libero quidem eveniet doloribus dicta dignissimos ad esse? Sapiente odio alias accusantium cumque, unde error expedita voluptas praesentium officia id ipsam maiores, et minima ducimus maxime rem suscipit perspiciatis incidunt facilis animi illo laudantium odit fugiat amet. Optio et laudantium necessitatibus totam! Vitae pariatur nihil eius amet molestias! Id dolor ea incidunt numquam ratione, necessitatibus officia quia consequuntur, at aliquam aliquid inventore ullam commodi non dolore dignissimos reprehenderit porro explicabo nisi consectetur ad, quam labore quas.</p>
<p class="p-4 mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore perferendis rerum, culpa accusamus eius autem repudiandae ad blanditiis quasi minus velit aut maiores ducimus laudantium sunt odit qui! Optio rem libero necessitatibus, autem nobis cum illo tempora eum, fugiat atque eligendi est facere quae aliquam commodi delectus ut dolorem officiis molestias tenetur ipsa, reprehenderit voluptatibus dignissimos? Atque, similique deserunt. Labore voluptas, obcaecati veniam corrupti ex dolor voluptatem perspiciatis commodi eos quo itaque minus. Ipsam, aspernatur? Mollitia sunt cupiditate consectetur dolorem a repellat vel quod odio adipisci illum quibusdam, explicabo id exercitationem corrupti, placeat sint reprehenderit est tempora saepe, at perspiciatis inventore officiis facilis omnis! Minima incidunt aliquam amet in voluptatibus ratione atque labore fuga tenetur nostrum, quaerat dolor necessitatibus architecto, beatae ab, similique libero quidem eveniet doloribus dicta dignissimos ad esse? Sapiente odio alias accusantium cumque, unde error expedita voluptas praesentium officia id ipsam maiores, et minima ducimus maxime rem suscipit perspiciatis incidunt facilis animi illo laudantium odit fugiat amet. Optio et laudantium necessitatibus totam! Vitae pariatur nihil eius amet molestias! Id dolor ea incidunt numquam ratione, necessitatibus officia quia consequuntur, at aliquam aliquid inventore ullam commodi non dolore dignissimos reprehenderit porro explicabo nisi consectetur ad, quam labore quas.</p>
<p class="p-4 mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore perferendis rerum, culpa accusamus eius autem repudiandae ad blanditiis quasi minus velit aut maiores ducimus laudantium sunt odit qui! Optio rem libero necessitatibus, autem nobis cum illo tempora eum, fugiat atque eligendi est facere quae aliquam commodi delectus ut dolorem officiis molestias tenetur ipsa, reprehenderit voluptatibus dignissimos? Atque, similique deserunt. Labore voluptas, obcaecati veniam corrupti ex dolor voluptatem perspiciatis commodi eos quo itaque minus. Ipsam, aspernatur? Mollitia sunt cupiditate consectetur dolorem a repellat vel quod odio adipisci illum quibusdam, explicabo id exercitationem corrupti, placeat sint reprehenderit est tempora saepe, at perspiciatis inventore officiis facilis omnis! Minima incidunt aliquam amet in voluptatibus ratione atque labore fuga tenetur nostrum, quaerat dolor necessitatibus architecto, beatae ab, similique libero quidem eveniet doloribus dicta dignissimos ad esse? Sapiente odio alias accusantium cumque, unde error expedita voluptas praesentium officia id ipsam maiores, et minima ducimus maxime rem suscipit perspiciatis incidunt facilis animi illo laudantium odit fugiat amet. Optio et laudantium necessitatibus totam! Vitae pariatur nihil eius amet molestias! Id dolor ea incidunt numquam ratione, necessitatibus officia quia consequuntur, at aliquam aliquid inventore ullam commodi non dolore dignissimos reprehenderit porro explicabo nisi consectetur ad, quam labore quas.</p>
</div>
<div class="row mt-6">
<div class="col-md-6">
<h4>col-6 - Fixed Scrollbar</h4>
<div class="canvas-custom-scroll border rounded mb-5">
<p class="p-4 mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore perferendis rerum, culpa accusamus eius autem repudiandae ad blanditiis quasi minus velit aut maiores ducimus laudantium sunt odit qui! Optio rem libero necessitatibus, autem nobis cum illo tempora eum, fugiat atque eligendi est facere quae aliquam commodi delectus ut dolorem officiis molestias tenetur ipsa, reprehenderit voluptatibus dignissimos? Atque, similique deserunt. Labore voluptas, obcaecati veniam corrupti ex dolor voluptatem perspiciatis commodi eos quo itaque minus. Ipsam, aspernatur? Mollitia sunt cupiditate consectetur dolorem a repellat vel quod odio adipisci illum quibusdam, explicabo id exercitationem corrupti, placeat sint reprehenderit est tempora saepe, at perspiciatis inventore officiis facilis omnis! Minima incidunt aliquam amet in voluptatibus ratione atque labore fuga tenetur nostrum, quaerat dolor necessitatibus architecto, beatae ab, similique libero quidem eveniet doloribus dicta dignissimos ad esse? Sapiente odio alias accusantium cumque, unde error expedita voluptas praesentium officia id ipsam maiores, et minima ducimus maxime rem suscipit perspiciatis incidunt facilis animi illo laudantium odit fugiat amet. Optio et laudantium necessitatibus totam! Vitae pariatur nihil eius amet molestias! Id dolor ea incidunt numquam ratione, necessitatibus officia quia consequuntur, at aliquam aliquid inventore ullam commodi non dolore dignissimos reprehenderit porro explicabo nisi consectetur ad, quam labore quas.</p>
<p class="p-4 mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore perferendis rerum, culpa accusamus eius autem repudiandae ad blanditiis quasi minus velit aut maiores ducimus laudantium sunt odit qui! Optio rem libero necessitatibus, autem nobis cum illo tempora eum, fugiat atque eligendi est facere quae aliquam commodi delectus ut dolorem officiis molestias tenetur ipsa, reprehenderit voluptatibus dignissimos? Atque, similique deserunt. Labore voluptas, obcaecati veniam corrupti ex dolor voluptatem perspiciatis commodi eos quo itaque minus. Ipsam, aspernatur? Mollitia sunt cupiditate consectetur dolorem a repellat vel quod odio adipisci illum quibusdam, explicabo id exercitationem corrupti, placeat sint reprehenderit est tempora saepe, at perspiciatis inventore officiis facilis omnis! Minima incidunt aliquam amet in voluptatibus ratione atque labore fuga tenetur nostrum, quaerat dolor necessitatibus architecto, beatae ab, similique libero quidem eveniet doloribus dicta dignissimos ad esse? Sapiente odio alias accusantium cumque, unde error expedita voluptas praesentium officia id ipsam maiores, et minima ducimus maxime rem suscipit perspiciatis incidunt facilis animi illo laudantium odit fugiat amet. Optio et laudantium necessitatibus totam! Vitae pariatur nihil eius amet molestias! Id dolor ea incidunt numquam ratione, necessitatibus officia quia consequuntur, at aliquam aliquid inventore ullam commodi non dolore dignissimos reprehenderit porro explicabo nisi consectetur ad, quam labore quas.</p>
</div>
</div>
<div class="col-md-6">
<h4>col-6 - Dark Background</h4>
<div class="canvas-custom-scroll bg-dark dark rounded mb-5">
<p class="p-4 mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore perferendis rerum, culpa accusamus eius autem repudiandae ad blanditiis quasi minus velit aut maiores ducimus laudantium sunt odit qui! Optio rem libero necessitatibus, autem nobis cum illo tempora eum, fugiat atque eligendi est facere quae aliquam commodi delectus ut dolorem officiis molestias tenetur ipsa, reprehenderit voluptatibus dignissimos? Atque, similique deserunt. Labore voluptas, obcaecati veniam corrupti ex dolor voluptatem perspiciatis commodi eos quo itaque minus. Ipsam, aspernatur? Mollitia sunt cupiditate consectetur dolorem a repellat vel quod odio adipisci illum quibusdam, explicabo id exercitationem corrupti, placeat sint reprehenderit est tempora saepe, at perspiciatis inventore officiis facilis omnis! Minima incidunt aliquam amet in voluptatibus ratione atque labore fuga tenetur nostrum, quaerat dolor necessitatibus architecto, beatae ab, similique libero quidem eveniet doloribus dicta dignissimos ad esse? Sapiente odio alias accusantium cumque, unde error expedita voluptas praesentium officia id ipsam maiores, et minima ducimus maxime rem suscipit perspiciatis incidunt facilis animi illo laudantium odit fugiat amet. Optio et laudantium necessitatibus totam! Vitae pariatur nihil eius amet molestias! Id dolor ea incidunt numquam ratione, necessitatibus officia quia consequuntur, at aliquam aliquid inventore ullam commodi non dolore dignissimos reprehenderit porro explicabo nisi consectetur ad, quam labore quas.</p>
<p class="p-4 mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore perferendis rerum, culpa accusamus eius autem repudiandae ad blanditiis quasi minus velit aut maiores ducimus laudantium sunt odit qui! Optio rem libero necessitatibus, autem nobis cum illo tempora eum, fugiat atque eligendi est facere quae aliquam commodi delectus ut dolorem officiis molestias tenetur ipsa, reprehenderit voluptatibus dignissimos? Atque, similique deserunt. Labore voluptas, obcaecati veniam corrupti ex dolor voluptatem perspiciatis commodi eos quo itaque minus. Ipsam, aspernatur? Mollitia sunt cupiditate consectetur dolorem a repellat vel quod odio adipisci illum quibusdam, explicabo id exercitationem corrupti, placeat sint reprehenderit est tempora saepe, at perspiciatis inventore officiis facilis omnis! Minima incidunt aliquam amet in voluptatibus ratione atque labore fuga tenetur nostrum, quaerat dolor necessitatibus architecto, beatae ab, similique libero quidem eveniet doloribus dicta dignissimos ad esse? Sapiente odio alias accusantium cumque, unde error expedita voluptas praesentium officia id ipsam maiores, et minima ducimus maxime rem suscipit perspiciatis incidunt facilis animi illo laudantium odit fugiat amet. Optio et laudantium necessitatibus totam! Vitae pariatur nihil eius amet molestias! Id dolor ea incidunt numquam ratione, necessitatibus officia quia consequuntur, at aliquam aliquid inventore ullam commodi non dolore dignissimos reprehenderit porro explicabo nisi consectetur ad, quam labore quas.</p>
</div>
</div>
</div>
<h4 class="mb-3 mt-5 text-center">Change Scroll Color:</h4>
<div class="d-flex justify-content-center">
<div onclick="ChangeColor('var(--bs-danger)', 'rgba(var(--bs-danger-rgb),0.2)')" class="square square-sm rounded-circle mx-1 bg-danger"></div>
<div onclick="ChangeColor('var(--bs-success)', 'rgba(var(--bs-success-rgb),0.2)')" class="square square-sm rounded-circle mx-1 bg-success"></div>
<div onclick="ChangeColor('var(--bs-warning)', 'rgba(var(--bs-warning-rgb),0.2)')" class="square square-sm rounded-circle mx-1 bg-warning"></div>
<div onclick="ChangeColor('var(--bs-info)', 'rgba(var(--bs-info-rgb),0.2)')" class="square square-sm rounded-circle mx-1 bg-info"></div>
<div onclick="ChangeColor('var(--bs-light)', 'rgba(var(--bs-light-rgb),0.2)')" class="square square-sm rounded-circle mx-1 bg-light border border-default"></div>
<div onclick="ChangeColor('var(--bs-dark)', 'rgba(var(--bs-dark-rgb),0.2)')" class="square square-sm rounded-circle mx-1 bg-dark"></div>
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/functions.js"></script>
<script src="js/plugins.letmescroll.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const scrollPanels = document.querySelectorAll( '.canvas-custom-scroll' );
scrollPanels.forEach( (element) => {
let panelHeight = element.getAttribute('data-height') || "250px";
let panelWidth = element.getAttribute('data-width') || "auto";
let panelAutohide = element.getAttribute('data-autohide') || "true";
if( panelAutohide == "false" ) {
panelAutohide = false;
} else {
panelAutohide = true;
}
new LetMeScroll({
selector: element,
config : {
dimensions : {
width : panelWidth,
height : panelHeight,
},
scroll : {
autoHide: panelAutohide
}
}
});
});
});
//Changing Colors
function ChangeColor(cor, fundo) {
document.documentElement.style.setProperty("--lms_scrollbar_bg", cor);
document.documentElement.style.setProperty("--lms_scrollpath_bg", fundo);
}
</script>
</body>
</html>