آموزش اسکرول افقی با جاوااسکریپت
نویسنده : مریم شیردل
خب برای داشتن نوار اسکرول افقی مثل عکس پایین صفحه اول قسمت html اونو مینویسیم .تگی که قسمت هدر رو مشخص میکنه
خب برای داشتن نوار اسکرول افقی مثل عکس پایین صفحه اول قسمت html اونو مینویسیم .تگی که قسمت هدر رو مشخص میکنه ، تگ با کلاس progressContainer که کل عرض صفحه رو میگیره ، تگ داخل اون با کلاس progressBar که قراره عرض اون متناسبه با مقداری از صفحه ک پیمایش کردیم
و بعدش نوبت میرسه به کد های css اونها
من میخوام داخلش سایه ابی داشته باشم و گوشه ها کمی گرد باشن
/* استایل مربوط به هدر صفحه ما */
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f9c413;
}
/* نوار اسکرول ما با رنگ طوسی */
.progressContainer {
width: 100%;
height: 8px;
background: #ccc;
}
/* قسمت متحرک نوار اسکرول */
.progressBar {
height: 8px;
background: #01a8ec;
width: 0%;
}
h2{
text-align:center;
}
در اخر نوبت قسمت جاوا اسکریپت کدماست.توی این کد گفته میشه ک:
هر وقت که صفحه ما اسکرول شد (window.onscroll) تابع (progressFunction()) فراخوانی بشه.
تابع progressFunction() ارتفاع کل صفحه رو اندازه میگیره و میریزه تو متغیر height
و ارتفاعی از صفحه که با اسکرول به اونجا رسیدیم تو متغیر winScroll ریخته میشه.
و محاسبه میشه چه درصدی از صفحه رو پیمایش کردیم ،این مقدار حالا تو متغیر scrolled است. و اون رو به عنوان عرض (width) برای تگ با ای دی Bar که همون قسمت متحرک اسکرول ماست
امیدوارم این سری اموزش های پیشترفته ما به دردتون بخوره و نهایت استفاده رو براتون داشته باشه