آموزش ویژگی scroll-behavior در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی scroll-behavior در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی scroll-behavior در CSS
با استفاده از ویژگی جذاب scroll-behavior
در CSS میتوان نحوه پرش و اسکرول شدن صفحه وقتی بروی لینک درون صفحه ای کلیک میشود را مشخص و یا تعریف کرد، نمیدونم باید چجوری توضیحش بدم، فقط میتونم بگم مثال شماره ۱ رو مشاهده نمایید بطور کامل متوجه خواهید شد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی scroll-behavior
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از ویژگی scroll-behavior در CSS
1 2 3 |
html{ scroll-behavior: smooth; } |
مثال شماره ۲ : استفاده از کتابخانه jquery در جاوااسکریپت ( چون برخی از مرورگرها از ویژگی Scroll-Behavior پشتیبانی نمیکنند پس بهتره از jquery استفاده نمایید چون در همه ی مرورگرها پشتیبانی میشود )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $("a").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 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html id="top"> <head> <style> a#my-top-btn{ background-color:#fff; display:block; text-align:center; box-shadow: 2px 5px 30px rgba(0,0,0,.1); text-decoration:none; padding:10px; color:blue; } </style> </head> <body> <div class="my-box"> <a id="my-top-btn" href="#top">برو به بالای صفحه</a> </div> </body> </html> |
مثال شماره ۴ : ساخت دکمه رفتن به بالای صفحه ( استفاده از jquery – روش دوم )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> var btn = $('#button'); $(window).scroll(function() { if ($(window).scrollTop() > 300) { btn.addClass('show'); } else { btn.removeClass('show'); } }); btn.on('click', function(e) { e.preventDefault(); $('html, body').animate({scrollTop:0}, '300'); }); </script> |
مثال شماره ۵ : ساخت دکمه رفتن به بالای صفحه ( استفاده از jquery – روش سوم )
1 2 3 4 5 6 7 8 |
<a href="#top">برو بالای صفحه</a> <script> $("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); </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 | IE |
scroll-behavior | ۶۱٫۰ | ۳۶٫۰ | ۴۸٫۰ | خیر | خیر |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
1 |
scroll-behavior: auto|smooth|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی scroll-behavior در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
auto | پیش فرض – اسکرول بین عناصر بصورت عادی پرش ( بدون هیچ تحرکی ) میکند |
smooth | اسکرول بصورت نرم یا صاف یا متحرک بین عناصر جابه جا میشود |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- این ویژگی در مرورگرهای سافاری ( Safari ) و اینترنت اکسپلورر ( IE ) پشتیبانی نمیشود
- برای سازگاری و کارایی مطمعن پیشنهاد میکنم همانند مثال شماره ۲ از جی کوئری ( jquery ) استفاده نمایید.