تشخیص عناصر همپوشانی با CSS

admin7 روز پیش

0 2 خواندن این مطلب 6 دقیقه زمان میبرد

مشکل

من در حال کار بر روی یک وب سایت نمونه کارها هستم و به یک سوال جالب برخوردم: آیا می توانم تشخیص دهم که یک عنصر با دیگری برخورد می کند یا برخورد می کند؟ پاسخ اولیه در پشت سر من نه است! این امکان پذیر نیست.

در اینجا یک نسخه انتزاعی از مشکل است.

می‌خواهم بدانم چه زمانی دکوراتور به قسمت لبه سمت چپ برخورد می‌کند، با توجه به اینکه عنصر می‌تواند موقعیت یا اندازه سیال داشته باشد (تغییر با درگاه دید یا اندازه ظرف).

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

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

پس از این مرحله، عنصر تزئینی باید پنهان شود.

با نزدیک شدن صفحه، فضای علامت گذاری شده کوچک می شود

حلش کنیم

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

در اینجا نسخه ی نمایشی است. اندازه را تغییر دهید و ببینید که چگونه عنصر تزئینی روی کارت ها همپوشانی دارد.

کوکی های شکلاتی خشک شده با کرن بری

راهنمای گام به گام درست کردن بهترین بیسکویت در خانه.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

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

استفاده از موقعیت لنگر

من می خواهم عنصری ایجاد کنم که به موارد زیر محدود شود:

لبه سمت راست عنصر تزئینی.
لبه سمت چپ ظرف بخش.

این عنصر فضای بین این دو است.

.decor {
  anchor-name: --line;
}

.section {
  anchor-name: --section;
}

.measure {
  position: absolute;
  left: anchor(--line right);
  right: anchor(--section left);
  top: anchor(--line top);
  bottom: anchor(--line bottom);
}

اندازه ظرف زیر را تغییر دهید تا ببینید فضای برجسته شده چگونه تغییر می کند.

کوکی های شکلاتی خشک شده با کرن بری

راهنمای گام به گام درست کردن بهترین بیسکویت در خانه.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

حال سوال این است که چگونه از فضای اندازه گیری شده برای انجام کارهایی مانند پنهان کردن عنصر تزئینی استفاده کنیم؟

ارائه محدوده زمانی

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

در دمو زیر که از MDN الهام گرفته شده است، با پیمایش فیلد متنی، انیمیشن فیلد دیگر فعال می شود.

مثل اتصال یک عنصر به عنصر دیگر است.

اینجا پیمایش کنید

scroll-timeline: --box;

با پیمایش فیلد سمت چپ خود را نشان می دهم.

animation: reveal 1ms linear;
animation-timeline: --box;

در اینجا CSS برای هر دو جعبه است:

.section-item-left {
  scroll-timeline: --box;
}

.section-item-right {
  animation: reveal 1ms linear;
  animation-timeline: --box;
}

این به تنهایی از آن زمان کار نخواهد کرد --box فقط برای اقلام داخل موجود است .section-item-left. برای اینکه چنین شود، باید دامنه را با استفاده از والد آن ارتقا دهیم timeline-scope.

.section {
  timeline-scope: --box;
}

با تعریف محدوده می توانیم به آن دسترسی داشته باشیم --box جدول زمانی در هر کجای داخل .section ظرف

اما این برای مورد ما چه معنایی دارد؟ بیایید دریابیم.

عنصر اندازه گیری

در عنصر اندازه، یک عنصر شبه گسترده 20 پیکسلی اضافه کردم. من هم تعریف کردم overflow-x: auto بنابراین می تواند اسکرول کند.

.measure {
  overflow-x: auto;
}

.measure:after {
  content: "";
  display: block;
  width: 20px;
  height: 100%;
  background-color: deeppink;
}

هدف از استفاده از یک شبه عنصر با عرض ثابت، ساختن است .measure سرریز عنصر زمانی که مکان کمتر از 20px، سرریز می شود (قابل پیمایش می شود).

اما این چه ارتباطی با مشکل ما دارد؟ در دمو زیر، عنصر اندازه را به همراه عنصر شبهی که اضافه کردم، داریم.

اندازه ظرف را تغییر دهید و ببینید که چگونه عرض عنصر اندازه گیری کوچک می شود تا زمانی که برابر یا کوچکتر از عنصر شبه شود.

کوکی های شکلاتی خشک شده با کرن بری

راهنمای گام به گام درست کردن بهترین بیسکویت در خانه.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

اگر نتوانستید اندازه را به اندازه دقیق تغییر اندازه دهید، در اینجا نسخه آزمایشی تغییر اندازه برای شما آورده شده است. در حال حاضر .measure عنصر overflow حتی می توانید در این فضای کوچک اسکرول کنید!

کوکی های شکلاتی خشک شده با کرن بری

راهنمای گام به گام درست کردن بهترین بیسکویت در خانه.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

با در نظر گرفتن این موضوع، اجازه دهید برای لحظه ای به نسخه نمایشی محدوده زمانی بازگردیم. در نسخه نمایشی محدوده زمانی، اگر در کادر سمت چپ اسکرول کنید، کادر دیگر متحرک خواهد شد.

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

انیمیشن در اینجا صرفاً برای چرخاندن یک متغیر است. من می گویم انیمیشن اما واقعاً انیمیشن نیست، می دانید.

این CSS است:

.section {
  --bg-color: lightgrey;
  timeline-scope: --bg;
}

.box-left {
  scroll-timeline: --bg;
}

.box-right {
  background-color: var(--bg-color);
  animation: change-bg 1ms linear;
  animation-timeline: --bg;
}

@keyframes change-bg {
  from, to {
    --bg-color: hsl(from deeppink h s calc(l + 30));
  }
}

اگر محتوای سمت چپ برای اسکرول کافی باشد، رنگ bg را تغییر می‌دهم!

نکته اصلی در اینجا این است که برای فعال کردن انیمیشن نیازی به اسکرول نداریم. ما فقط باید محتوای بیشتری داشته باشیم تا یک ظرف سرریز شود.

به همین دلیل من همان ارزش را دارم from و to ارزش ها من به پیشرفت اینجا اهمیت نمی دهم. من فقط می خواهم متغیر CSS را در لحظه ای که سرریز وجود دارد معکوس کنم.

در مورد ما، ظرف عنصر اندازه گیری است. و زمانی که فضای کافی برای عنصر شبه در آن وجود نداشته باشد سرریز می شود.

body {
  --touching: 0;
  timeline-scope: --touch;
  animation: flip-touch 1ms linear;
  animation-timeline: --touch;
}

.measure {
  scroll-timeline: --touch x;
}

@keyframes flip-touch {
  from, to {
    --touching: 1;
  }
}

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

.decor {
  @container style(--touching: 1) {
    opacity: 0;
  }
}

کوکی های شکلاتی خشک شده با کرن بری

راهنمای گام به گام درست کردن بهترین بیسکویت در خانه.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

عنوان بخش

در اینجا متنی وجود دارد که چیزی را تقلید نمی کند، فقط برای سرگرمی.

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

وام

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

استاد چیدمان

طرح‌بندی ساختمان می‌تواند یک کار چالش برانگیز باشد، به خصوص اگر مدل ذهنی اولیه چیدمان‌های CSS را نمی‌دانید. دیگر لازم نیست نگران آن باشید. من یک دوره تعاملی در مورد طرح بندی CSS منتشر کردم و آن را نام بردم استاد چیدمان.