چگونه ایجاد شود: اسکرول روان

آموزش نحوه استفاده از CSS برای ایجاد تأثیرات روانی در اسکرول.

اسکرول یکنواخت

بخش 1
روی من کلیک کنید، اسکرول یکنواخت به بخش دوم پایین بروید.

با کلیک بر روی لینک، اثر اسکرول یکنواخت دیده می‌شود.

توجه داشته باشید:حذف کردن scroll-behavior می‌تواند اسکرول یکنواخت را لغو کند.

اسکرول یکنواخت

برای افزودن به عنصر <html> scroll-behavior: smooth می‌توانید اسکرول یکنواخت صفحه‌ای را فعال کنید:

توجه داشته باشید:همچنین می‌توان آن را به عنصر خاص/محفظه اسکرول خاصی اضافه کرد.

مثال

html {
  scroll-behavior: smooth;
}

آزمایش شخصی کنید

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از خاصیت اسکرول رفتار کامل پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

راه‌حل‌های چند مرورگر

برای scroll-behavior برای مرورگرهایی که از این خاصیت پشتیبانی نمی‌کنند، می‌توانید از JavaScript یا کتابخانه‌های JavaScript (مانند jQueryبرای ایجاد راه‌حل‌های قابل استفاده در همه مرورگرها استفاده کنید:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // برای همه لینک‌ها اسکرول یکنواخت اضافه کنید
  $("a").on('click', function(event) {
    // قبل از تغییر عملکرد پیش‌فرض، اطمینان حاصل کنید که this.hash دارای ارزش است
    if (this.hash !== "") {
      // عملکرد کلیک پیش‌فرض را جلوگیری کنید
      event.preventDefault();
      // ارزش هش را ذخیره کنید
      var hash = this.hash;
      // از روش animate() jQuery برای ایجاد اسکرول صفحه‌ای یکنواخت استفاده کنید
      // عدد انتخابی (800) مدت زمان میلی ثانیه‌ای را مشخص می‌کند که اسکرول به منطقه مشخص شده نیاز دارد
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // پس از تکمیل اسکرول، علامت (#) را به URL اضافه کنید (عملکرد پیش‌فرض کلیک)
        window.location.hash = hash;
      });
    } // پایان اگر
  });
});
</script>

آزمایش شخصی کنید

صفحات مرتبط

دستورالعمل‌ها:ویژگی scroll-behavior CSS