این آموزش در تاریخ ۱۴۰۰/۱۱/۱۳ آپدیت شده است.
آموزش ویژگی scroll-behavior در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی scroll-behavior در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی scroll-behavior در CSS
با استفاده از ویژگی جذاب scroll-behavior در CSS میتوان اسکرول نرم ایجاد کرد، مثلا درون صفحه هستیم و بروی دکمه برو به بالا کلیک میکنیم، خب این بالا رفتن بصورت افکت نرم / آروم انجام میشه.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی scroll-behavior را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از ویژگی scroll-behavior در ریشه یک صفحه وب ( در تگ html هم میشه استفاده کرد و فرقی نمیکنه )
|
1 2 3 |
:root{ scroll-behavior: smooth; } |
مثال شماره ۲ : ایجاد دکمه برو به بالای صفحه با اسکرول نرم
- استفاده از scroll-behavior برای اسکرول نرم
|
1 2 3 |
:root{ scroll-behavior: smooth; } |
- دکمه برو به بالای صفحه رو در گوشه پایین سمت راست صفحه فیکس کردیم و همچنین مخفی کردیم که نشون داده نشه ( چون در ادامه میخوایم کاری کنیم که وقتی اسکرول کردیم بسمت پایین دکمه نشون داده بشه )
|
1 2 3 4 5 6 7 8 9 |
#button{ position: fixed; bottom: 30px; right: 5px; transition: opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 99999; } |
- ایجاد کلاس show ( وقتی کاربر بسمت پایین اسکرول کرد این کلاس به دکمه برو بالا اضافه میشه، در نتیجه دکمه نشون داده میشه )
|
1 2 3 4 |
#button.show { opacity: 1; visibility: visible; } |
- حالا یه تابع داخل جاوااسکریپت نوشتم که وقتی به اندازه ۲۰۰پیکسل بسمت پایین اسکرول شد، دکمه خودشو نشون بده
|
1 2 3 4 5 6 7 8 |
function MyBtn_GoUp(){ var Btn_GoUp = document.getElementById("button"); if( window.pageYOffset > 200 ){ Btn_GoUp.classList.add("show") }else{ Btn_GoUp.classList.remove("show"); } } |
- حالا همون تابع رو میزاریم داخل تگ body و رویداد OnScroll ( یعنی وقتی اسکرول شد )
|
1 2 3 |
<body onscroll="MyBtn_GoUp();"> ..... </body> |
مثال شماره ۳ : همون مثال شماره ۱ هست فقط این با کتابخانه jquery هستش ( استفاده از jquery خیلی مطمعن تره و تمامی مرورگرها ازش پشتیبانی میکنند )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $(".mylink").on('click', function(event){ if (this.hash !== ""){ event.preventDefault(); var hash = this.hash; $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); } }); }); </script> |
مثال شماره ۴ : همون مثال شماره ۲ هست، فقط این با کتابخانه jquery هستش
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> var btn = $('#button'); $(window).scroll(function() { if ($(window).scrollTop() > 300) { btn.addClass('show'); } else { btn.removeClass('show'); } }); btn.on('click', function(e) { $('html, body').animate({scrollTop:0}, '300'); e.preventDefault(); }); </script> |
Free-Learn
جدول مشخصات ویژگی scroll-behavior در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS Object Model View Module |
| نحوه استفاده در جاوااسکریپت | object.style.scrollBehavior=”smooth”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی scroll-behavior در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| scroll-behavior | ۶۱ | ۳۶ | ۴۸ | ۱۵٫۴ | ۷۹ |
* پشتیبانی این ویژگی بروی مرورگر Safari بطور دقیق مشخص نیست، ممکنه از نسخه ۱۵٫۴ هم کار نکنه.
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
scroll-behavior: auto|smooth|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی scroll-behavior در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش فرض – هیچ اسکرول نرمی ایجاد نمیشود |
| smooth | اسکرول بصورت نرم ایجاد میشود |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- پشتیبانی این ویژگی در مرورگر سافاری ( Safari ) بطور دقیق مشخص نیست ، یجا اشاره شده در نسخه ۱۵٫۴ پشتیبانی میشه و جایی دیگه اشاره شده که کلا پشتیبانی نمیشه، برای همین بطور کامل مطمعن نیستم و مشخص نیست.
- برای بحث مطمعن بودن و سازگاری با مرورگرها ،حتما از جی کوئری ( Jquery ) استفاده نمایید.
