نحوه پیاده سازی اسکرول صاف با CSS و جاوا اسکریپت

1. با نشانه گذاری HTML شروع کنید

برای اهداف نمایشی، ما یک هدر پیچیده شده در یک ظرف و چهار بخش تعریف می کنیم. در داخل آن، یک منوی ناوبری و یک متن مقدماتی را مشخص می کنیم.

هر بخش دارای یک id که ارزش آن مطابقت خواهد داشت href ارزش پیوند منو این تداعی (چیزی که ما از آن به عنوان یک شناسه قطعه) به ما امکان می دهد به بخش های خاصی از صفحه خود پرش کنیم.

این HTML است:

1

<div class="container">

2

  ...

3

  <header class="page-header">

4

    <nav>

5

      <ul>

6

        <li>

7

          <a href="#...">...</a>

8

        </li>

9

        <!-- more links -->

10

      </ul>

11

    </nav>

12

    <div class="header-text">...</div>

13

  </header>

14

</div>

15

<section class="section" id="">...</section>

16

<section class="section" id="">...</section>

17

<section class="section" id="">...</section>

18

<section class="section" id="">...</section>

2. سبک ها را تعریف کنید

بخش CSS بسیار ساده خواهد بود، هیچ چیز خارق العاده ای نیست.

ابتدا از CSS Grid برای چیدمان هدر صفحه استفاده می کنیم. منو یک چهارم عرض موجود را پوشش می دهد، در حالی که متن سه چهارم باقی مانده را پوشش می دهد (موارد پاسخگو در اینجا واقعاً مهم نیستند):

1

.page-header {

2

  display: grid;

3

  grid-column-gap: 30px;

4

  grid-template-columns: 1fr 3fr;

5

  padding: 40px 0;

6

  border-top: 1px solid;

7

  border-bottom: 1px solid;

8

  margin-bottom: 150px;

9

}

10

11

.header-text {

12

  font-weight: bold;

13

}

در ادامه، چند سبک را در بخش ها اعمال می کنیم. مهمتر از همه، ما مطمئن می شویم که آنها به اندازه کافی بلند خواهند بود، بنابراین پیمایش کافی در داخل صفحه برای افکت وجود دارد:

1

/*CUSTOM VARIABLES HERE*/

2

3

.section {

4

  padding: 150px 0;

5

}

6

7

.section:nth-of-type(1),

8

.section:nth-of-type(3) {

9

  background: var(--beige);

10

}

11

12

.section-text {

13

  margin: 50px 0;

14

  max-width: 800px;

15

}

16

17

.section-btn {

18

  display: inline-block;

19

  color: var(--beige);

20

  background: var(--black);

21

  min-width: 200px;

22

  height: 50px;

23

  padding: 9px 40px;

24

  text-align: center;

25

}

این تمام چیزی است که تا اینجا نیاز داریم! اگر اکنون روی یک لینک خاص کلیک کنیم، بلافاصله به بخش صفحه مربوطه می‌رویم.

نسخه ی نمایشی اولیه ما را بررسی کنید:

چیزهای اولیه HTML، درست است؟ بیایید اکنون یک قدم جلوتر برویم و یاد بگیریم که چگونه به بخش ها پیمایش کنیم به نرمی.

ساده‌ترین و سریع‌ترین روش برای اعمال پیمایش روان در داخل صفحه، از طریق قانون زیر است:

1

html { 

2

  scroll-behavior: smooth; 

3

}

بیایید توضیح دهیم.

یک ویژگی CSS نسبتاً جدید به نام وجود دارد scroll-behavior. این ویژگی دو مقدار را می پذیرد: auto (پیش فرض) و smooth. به محض اینکه بدهیم scroll-behavior: smooth به html عنصر، جادو اتفاق خواهد افتاد، و ما قادر خواهیم بود به آرامی به بخش هدف حرکت کنیم.

توجه داشته باشید: اگر تنظیم کنید scroll-behavior: smooth به body عنصر، پیمایش صاف کار نخواهد کرد.

به عنوان یک یادداشت اضافی، به خاطر داشته باشید که در زمان نوشتن این مقاله، هیچ موردی وجود ندارد speed گزینه تعریف شده در مشخصات برای دستکاری سرعت انیمیشن

در اینجا نسخه ی نمایشی مرتبط است:

بررسی راه حل

این یک ویژگی CSS عالی و امیدوارکننده است و همینطور است پشتیبانی از مرورگر به تدریج رشد می کند. با این حال، حتی سافاری که در نسخه های قبلی خود فاقد پشتیبانی بود، شروع به پشتیبانی از آن کرده است.

ما به روش سنتی جی کوئری ادامه خواهیم داد. گفته شد، برای ایجاد اسکرول روان با جی کوئری، از مزایای آن استفاده خواهیم کرد animate() روش.

هر بار که روی پیوند ناوبری کلیک می کنیم، کارهای زیر را انجام می دهیم:

1. رفتار پیش فرض آن را لغو کنید تا به بخش مربوطه بروید.
2. آن را بگیر href مقدار ویژگی
3. با متحرک کردن به آرامی به بخش مرتبط بروید scrollTop ویژگی. توجه داشته باشید که animate() روش به ما اجازه می دهد تا سرعت انیمیشن را تنظیم کنیم. در مورد ما، انیمیشن 800 میلی‌ثانیه طول خواهد کشید.

این کد جی کوئری است:

1

$(".page-header ul a").on("click", function (e) {

2

  // 1

3

  e.preventDefault();

4

  // 2

5

  const href = $(this).attr("href");

6

  // 3

7

  $("html, body").animate({ scrollTop: $(href).offset().top }, 800);

8

});

و دمو مربوطه:

بررسی راه حل

نقطه ضعف اصلی این روش این است که باید یک کتابخانه جاوا اسکریپت اضافی بارگذاری کنید. برعکس، این یک راه حل قابل اعتماد است که روی صفحه نمایش/دستگاه های مختلف به خوبی کار می کند و می توانید سرعت اسکرول را سفارشی کنید. فقط در صورتی که پروژه شما قبلاً از جی کوئری استفاده می کند یا به آن نیاز دارد، با آن بروید.

در این مرحله، jQuery را دور می اندازیم و روی دو راه حل خالص جاوا اسکریپت تمرکز می کنیم. خوشبختانه، این بسیار ساده تر از آن چیزی است که شما ممکن است انتظار داشته باشید.

با استفاده از scroll() روش

ابتدا از scroll() روش. منطق این رویکرد مشابه پیاده سازی قبلی jQuery است.

در داخل این روش، رفتار پیمایش را از طریق تعیین می کنیم behavior ویژگی پیکربندی این ویژگی نمایش جاوا اسکریپت است scroll-behavior ویژگی CSS و می تواند دریافت کند auto (پیش فرض)، smooth و instant (به بخش 7 بعدی مراجعه کنید). دوباره در اینجا، تنها کاری که باید انجام دهیم این است که مقدار the را تنظیم کنیم behavior دارایی به smooth.

در اینجا کد مورد نیاز است:

1

const links = document.querySelectorAll(".page-header ul a");

2

3

for (const link of links) {

4

  link.addEventListener("click", clickHandler);

5

}

6

7

function clickHandler(e) {

8

  e.preventDefault();

9

  const href = this.getAttribute("href");

10

  const offsetTop = document.querySelector(href).offsetTop;

11

12

  scroll({

13

    top: offsetTop,

14

    behavior: "smooth"

15

  });

16

}

در اینجا نسخه ی نمایشی مرتبط است:

با استفاده از scrollIntoView() روش

فراتر از روش های اسکرول فوق الذکر که به ضمیمه شده اند window شی (یعنی window.scroll()، همچنین وجود دارد scrollIntoView() روشی که برای عناصر DOM اعمال می شود. این می تواند آشنا را نیز بپذیرد behavior دارایی با مقدار تنظیم شده به smooth.

در اینجا کد مورد نیاز برای این پیاده سازی است:

1

const links = document.querySelectorAll(".page-header ul a");

2

3

for (const link of links) {

4

  link.addEventListener("click", clickHandler);

5

}

6

7

function clickHandler(e) {

8

  e.preventDefault();

9

  const href = this.getAttribute("href");

10

11

  document.querySelector(href).scrollIntoView({

12

    behavior: "smooth"

13

  });

14

}

نسخه ی نمایشی مربوطه:

بررسی راه حل ها

نسخه بومی جاوا اسکریپت اسکرول صاف به کد بیشتری در مقایسه با ویژگی اصلی CSS نیاز دارد. مانند راه حل CSS، پشتیبانی آن هر روز در حال افزایش است. برعکس، هیچ راه آسانی برای کنترل سرعت اسکرول وجود ندارد مگر اینکه کد خود را بنویسیم.

6. Polyfills لطفا؟

همانطور که قبلاً بحث شد، پیمایش صاف بومی با CSS یا جاوا اسکریپت در حال افزایش است، اما گاهی اوقات ممکن است بخواهید پشتیبانی را در مرورگرهای قدیمی تر گسترش دهید.

در چنین حالتی می توانید از پلی فیل مانند محبوب استفاده کنید اسکرول صاف با بیش از 3.5 هزار ستاره GitHub.

برای گنجاندن آن در پروژه های خود، آن را از a بگیرید CDN، سپس آن را به صورت یک درج کنید script قبل از کد جاوا اسکریپت خود را تگ کنید.

در مورد ما، به محض اینکه آن را در یکی از خود بارگذاری کنیم دموهای جاوا اسکریپت، انیمیشن اسکرول در مرورگرهایی مانند Safari 14 و دستگاه هایی مانند iPad Mini 4 کار می کند. اما اگر آن را به ما اضافه کنیم نسخه ی نمایشی CSS، انیمیشن اسکرول کار نخواهد کرد در مرورگرها/دستگاه های پشتیبانی نشده

در اینجا یکی از دموهای جاوا اسکریپت ذکر شده با polyfill تعبیه شده است:

7. جلوگیری از اسکرول صاف در HTML

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

بیایید فرض کنیم که در نسخه ی نمایشی ما نیز یک وجود دارد بازگشت به بالا دکمه. به‌طور پیش‌فرض، پیمایش صاف را از طریق CSS فعال می‌کنیم، اما سپس این رفتار را فقط برای آن دکمه لغو می‌کنیم.

روش شماره 1

برای رسیدن به این هدف، پس از کلیک روی دکمه، ابتدا رفتار پیمایش صفحه را با تنظیم لغو می کنیم scroll-behavior: auto، و پس از پیمایش به بالای صفحه، آن را مجدداً تنظیم می کنیم smooth.

در اینجا کد مورد نیاز است:

1

//we have set scroll-behavior: smooth in CSS

2

3

const root = document.documentElement;

4

const back = document.querySelector(".back");

5

6

back.addEventListener("click", function (e) {

7

  e.preventDefault();

8

  root.style.scrollBehavior = "auto";

9

  scroll({

10

    top: document.body.offsetTop

11

  });

12

  root.style.scrollBehavior = "";

13

});

و نسخه ی نمایشی مرتبط:

روش شماره 2

همچنین می توانیم با پاس دادن از پیمایش صاف در HTML جلوگیری کنیم behavior: instant به scroll() روش. در زمان نوشتن، این مقدار در سند ثبت نشده است اسناد MDN، اما به عنوان یک گزینه در نمایان می شود مشخصات ویرایشگر. طبق آزمایشات من، حداقل روی آخرین نسخه های کروم، فایرفاکس و اج کار می کند.

در اینجا مثال قبلی با این اصلاح است:

نتیجه

همین است، مردمی! امروز چند گزینه برای دستیابی به اسکرول صاف با CSS و جاوا اسکریپت (از جمله jQuery) را پوشش دادیم. ما همچنین نحوه جلوگیری از پیمایش صاف در CSS از طریق جاوا اسکریپت را بررسی کردیم.

امیدوارم این تمرین برای شما مفید بوده باشد و دانش خود را کمی افزایش داده باشد. اگر تا به حال چیزی مشابه در گذشته ساخته اید، لطفاً آن را از طریق ما به اشتراک بگذارید رسانه های اجتماعی.

چالش: قبل از بستن یک چالش کوچک برای شما دارم! وظیفه شما این است که یکی از دموهای جاوا اسکریپت خود را با قرار دادن دکمه “بازگشت به بالا” گسترش دهید. عملکرد نهایی باید مانند کار کند این نسخه ی نمایشی. آیا چالش را قبول دارید؟ اگر چنین است، خوشحال می شوم راه حل شما را ببینم!

مثل همیشه، خیلی ممنون که خواندید!