این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

CSS scroll-state(),CSS scroll-state()

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

Adam Argyle

تاریخ انتشار: 15 ژانویه 2025

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

نمای کلی

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

در اینجا یک نمای کلی از جستجوهای وضعیت موجود از Chrome 133 آمده است:

حالت گیر کرده :: هنگامی که یک عنصر به لبه چسبیده است، سبک ماشه تغییر می کند.
حالت شکسته :: هنگامی که یک عنصر روی یک محور قرار می گیرد، سبک ماشه تغییر می کند.
حالت اسکرول :: هنگامی که یک عنصر سرریز است، سبک ماشه تغییر می کند.

خبر خوب این است که همه چیزهایی که از پرس و جوهای کانتینر آموخته اید به شما کمک می کند تا با پرس و جوهای وضعیت اسکرول کار کنید.

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

(چپ) اسکرول-استیت() انیمیشن راه اندازی شده، (راست) انیمیشن پیمایش محور
https://codepen.io/web-dot-dev/pen/emOrBaV

اول پرس و جوی حالت اسکرول

اولین گام این است که ظرف را با استفاده از یک مقدار جدید برای ویژگی container-type تعریف کنید. مانند پرس و جوی کانتینر، عنصری که می‌خواهید پرس و جو کنید، عنصری است که container-type و در صورت تمایل یک container-name می‌دهید. با پرس و جوهای وضعیت اسکرول، عنصری را می‌دهید که در حال شکستن، گیر کردن یا دارای سرریز container-type: scroll-state .

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;
}

مرحله دوم این است که فرزند آن کانتینر را انتخاب کنید که به حالت پاسخ دهد، زیرا در مورد جستجوهای کانتینر این عنصر نمی تواند همان عنصری باشد که container-type روی آن است.

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

مرحله سوم این است که آن را امتحان کنید. مثال CSS زیر زمانی که عنصر .stuck-top به بالای 0 می چسبد، به پس زمینه قرمز رنگ می دهد. با چند خط اضافی در CSS که قبلاً نوشته بودیم و یک عنصر حاوی اضافی که حالت مرورگر را پراکسی می کند، اجزای ما در مورد محیط اطراف خود بسیار هوشمندتر هستند.

https://codepen.io/web-dot-dev/pen/ByBxpwR

تقویت پیشرونده

@supports at-rule و nesting می‌تواند به شما اجازه دهد پیشرفت تدریجی یا استفاده از ویژگی شرطی را تنها در چند خط کد اضافی اضافه کنید:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      @container scroll-state(stuck: top) {
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

همچنین، به یاد داشته باشید که از @media (prefers-reduced-motion: no-preference) {} در اطراف حرکت خود استفاده کنید، اگر در نهایت عناصر صفحه را با پرس و جوهای حالت اسکرول متحرک سازید.

موارد استفاده

گیر کرده

شاید این بخش را باید "موقعیت های چسبنده؟" نامید. این مجموعه کوچکی از موارد استفاده از حالت چسبنده، به علاوه بخش جایزه ای از ایده هایی است که باید ساخته شوند.

@container scroll-state(stuck: top) {}
@container scroll-state(stuck: bottom) {}

فهرست کامل نحو

در صورت گیر کردن یک سایه اضافه کنید

یکی از رایج‌ترین موارد استفاده برای پرس و جوی گیر کرده، نوارهای پیمایشی است که می‌خواهند در هنگام گیر کردن، box-shadow اضافه کنند، بنابراین می‌توانند روی محتوایی که روی آن قرار می‌گیرند شناور به نظر برسند.

https://codepen.io/web-dot-dev/pen/GgKdryj

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    transition: box-shadow .3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: var(--shadow-5);
    }
  }
}

هدر گیر فعلی را فعال کنید

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

https://codepen.io/web-dot-dev/pen/pvzVRaK

.sticky-slide {
  dt {
    container-type: scroll-state;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;

    > header {
      transition: 
        background .3s ease,
        box-shadow .5s ease;

      @container scroll-state(stuck: top) {
        background: hsl(265 100% 27%);
        box-shadow: 0 5px 5px #0003;
      }
    }
  }
}

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

https://codepen.io/web-dot-dev/pen/azoGpGg

سرریز ایده

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

https://codepen.io/BlogFire/pen/PoGMjaX - نوع یادداشت های چسبنده
https://codepen.io/mikegolus/pen/jOZzRzw - سایه ها را به جدول زمانی که می چسبند اضافه کنید
https://codepen.io/MarcRay/pen/PomBeP - زیر نوار ناوبری هدر روی ماشه ظاهر می شود
https://codepen.io/kevinpowell/pen/OqKJjK - نوار ناوبری پاورقی آشکار می شود
https://codepen.io/abhisekz-the-decoder/pen/eKaLRd - هدرهای کارت چسبنده
https://codepen.io/tutsplus/pen/abojPjP - سایه هدر قیمت گذاری روی ماشه
https://codepen.io/kevinpowell/pen/KEjMEv - عناوین نوار کناری بخش چسبنده

شکسته شد

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

@container scroll-state(snapped: x) {}
@container scroll-state(snapped: y) {}
@container scroll-state(snapped: inline) {}
@container scroll-state(snapped: block) {}

فهرست کامل نحو

یک یادآوری کوچک، در صورتی که بخش First scroll-state query را نادیده گرفتید، محفظه یک پرس و جو فوری عنصری است که روی آن scroll-snap-align قرار دارد، و عنصری که می تواند تطبیق دهد باید فرزند آن عنصر باشد. این بدان معنی است که سه عنصر برای تنظیم این مورد نیاز است:

a scroll container with `scroll-snap-type`
⤷ a snap target with both `scroll-snap-align` and `container-type: scroll-state`
    ⤷ a child of the snap target that can query the container for snap state

به صورت بصری آیتم شکسته شده را تقویت کنید

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

https://codepen.io/web-dot-dev/pen/NPKMdBX

.demo {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  > article {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      > * {
        transition: opacity .5s ease;

        @container not scroll-state(snapped: x) {
          opacity: .25;
        }
      }
    }
  }
}

نشان دادن شرح مورد عکس‌برداری شده

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

https://codepen.io/web-dot-dev/pen/XJrqpBG

.demo {
  overflow-x: auto;
  scroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  > .card {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        figcaption {
          transform: translateY(100%);

          @container scroll-state(snapped: x) {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

متحرک سازی در عناصر اسلاید

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

https://codepen.io/web-dot-dev/pen/dPbeNqY

html {
  scroll-snap-type: y mandatory;
}

section {
  container-type: scroll-state;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  @supports (container-type: scroll-state) {
    @media (prefers-reduced-motion: no-preference) {
      > h1 {
        transition: opacity .5s ease, transform .5s var(--ease-spring-3);
        transition-delay: .5s;
        opacity: 0;
        transform: scale(1.25);

        @container scroll-state(snapped: block) {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}

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

قابل پیمایش

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

@container scroll-state(scrollable: top) {}
@container scroll-state(scrollable: right) {}
@container scroll-state(scrollable: bottom) {}
@container scroll-state(scrollable: left) {}

فهرست کامل نحو

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

یک ترفند معروف CSS توسط Lea Verou وجود دارد که از background-attachment: local برای رسیدن به جلوه‌ای مشابه این، و همچنین راهی برای انجام آن با انیمیشن‌های اسکرول . هر تکنیک دارای معاوضه هایی است، این وظیفه ماست که بررسی کنیم که چه زمانی و کجا هر یک از این تکنیک ها به بهترین وجه مناسب است.

مثال زیر از یک عنصر چسبنده استفاده می‌کند که از Scrollport استفاده می‌کند. یک گرادیان در بالا و یک گرادینت در پایین، کدورت آنها با @property متحرک زمانی است که پرس و جو وضعیت اسکرول متنی آنها اعمال می شود: @container scroll-state(scrollable: top) .

همچنین توجه داشته باشید، این اولین ظرفی است که هم size و هم scroll-state دارد.

https://codepen.io/web-dot-dev/pen/OPLZWBj

.scroll-container {
  container-type: scroll-state size;
  overflow: auto;

  &::after {
    content: " ";

    background: var(--_shadow-top), var(--_shadow-bottom);
    transition: 
      --_scroll-shadow-color-1-opacity .5s ease,
      --_scroll-shadow-color-2-opacity .5s ease;

    @container scroll-state(scrollable: top) {
      --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%);
    }

    @container scroll-state(scrollable: bottom) {
      --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%);
    }
  }
}

پیکان اعلان

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

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
}

@container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
  rotate: .5turn;
}

بازگشت به بالا

یکی دیگر از تعاملات محبوب حالت اسکرول دکمه راحتی "پیمایش به بالا" است. کد زیر باعث می شود تا زمانی که جایی برای اسکرول کردن وجود ندارد، دکمه اسکرول به بالا ناپدید شود.

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

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container not scroll-state(scrollable: top) {
  translate: 0 calc(100% + 10px);
}

ادامه مطالعه

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

چه چیز دیگری باید بتوانیم پرس و جوی کانتینری داشته باشیم؟ https://github.com/w3c/csswg-drafts/issues/5989
توضیح scroll-state() - https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.md
scroll-state() مشخصات CSS - https://www.w3.org/TR/css-conditional-5/#scroll-state-container
عکس فوری چیدمان در حلقه رویداد HTML
یک قسمت پادکست در مورد درخواست های وضعیت - https://nerdy.dev/the-css-podcast-on-state-queries
مقالات بیشتر
- https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css/
- https://ishadeed.com/article/css-state-queries/
- https://csscade.com/can-you-detect-overflow-with-css/
- https://css-tip.com/overflow-detection/ - تشخیص با اسکرول متحرک به روشی که بیشتر از کودکان می توانند بدانند (با تقلب)

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

Adam Argyle

تاریخ انتشار: 15 ژانویه 2025

نمای کلی

در اینجا یک نمای کلی از جستجوهای وضعیت موجود از Chrome 133 آمده است:

حالت گیر کرده :: هنگامی که یک عنصر به لبه چسبیده است، سبک ماشه تغییر می کند.
حالت شکسته :: هنگامی که یک عنصر روی یک محور قرار می گیرد، سبک ماشه تغییر می کند.
حالت اسکرول :: هنگامی که یک عنصر سرریز است، سبک ماشه تغییر می کند.

(چپ) اسکرول-استیت() انیمیشن راه اندازی شده، (راست) انیمیشن پیمایش محور
https://codepen.io/web-dot-dev/pen/emOrBaV

اول پرس و جوی حالت اسکرول

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;
}

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

https://codepen.io/web-dot-dev/pen/ByBxpwR

تقویت پیشرونده

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      @container scroll-state(stuck: top) {
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

موارد استفاده

گیر کرده

@container scroll-state(stuck: top) {}
@container scroll-state(stuck: bottom) {}

فهرست کامل نحو

در صورت گیر کردن یک سایه اضافه کنید

https://codepen.io/web-dot-dev/pen/GgKdryj

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    transition: box-shadow .3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: var(--shadow-5);
    }
  }
}

هدر گیر فعلی را فعال کنید

https://codepen.io/web-dot-dev/pen/pvzVRaK

.sticky-slide {
  dt {
    container-type: scroll-state;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;

    > header {
      transition: 
        background .3s ease,
        box-shadow .5s ease;

      @container scroll-state(stuck: top) {
        background: hsl(265 100% 27%);
        box-shadow: 0 5px 5px #0003;
      }
    }
  }
}

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

https://codepen.io/web-dot-dev/pen/azoGpGg

سرریز ایده

https://codepen.io/BlogFire/pen/PoGMjaX - نوع یادداشت های چسبنده
https://codepen.io/mikegolus/pen/jOZzRzw - سایه ها را به جدول زمانی که می چسبند اضافه کنید
https://codepen.io/MarcRay/pen/PomBeP - زیر نوار ناوبری هدر روی ماشه ظاهر می شود
https://codepen.io/kevinpowell/pen/OqKJjK - نوار ناوبری پاورقی آشکار می شود
https://codepen.io/abhisekz-the-decoder/pen/eKaLRd - هدرهای کارت چسبنده
https://codepen.io/tutsplus/pen/abojPjP - سایه هدر قیمت گذاری روی ماشه
https://codepen.io/kevinpowell/pen/KEjMEv - عناوین نوار کناری بخش چسبنده

شکسته شد

@container scroll-state(snapped: x) {}
@container scroll-state(snapped: y) {}
@container scroll-state(snapped: inline) {}
@container scroll-state(snapped: block) {}

فهرست کامل نحو

a scroll container with `scroll-snap-type`
⤷ a snap target with both `scroll-snap-align` and `container-type: scroll-state`
    ⤷ a child of the snap target that can query the container for snap state

به صورت بصری آیتم شکسته شده را تقویت کنید

https://codepen.io/web-dot-dev/pen/NPKMdBX

.demo {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  > article {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      > * {
        transition: opacity .5s ease;

        @container not scroll-state(snapped: x) {
          opacity: .25;
        }
      }
    }
  }
}

نشان دادن شرح مورد عکس‌برداری شده

https://codepen.io/web-dot-dev/pen/XJrqpBG

.demo {
  overflow-x: auto;
  scroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  > .card {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        figcaption {
          transform: translateY(100%);

          @container scroll-state(snapped: x) {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

متحرک سازی در عناصر اسلاید

https://codepen.io/web-dot-dev/pen/dPbeNqY

html {
  scroll-snap-type: y mandatory;
}

section {
  container-type: scroll-state;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  @supports (container-type: scroll-state) {
    @media (prefers-reduced-motion: no-preference) {
      > h1 {
        transition: opacity .5s ease, transform .5s var(--ease-spring-3);
        transition-delay: .5s;
        opacity: 0;
        transform: scale(1.25);

        @container scroll-state(snapped: block) {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}

قابل پیمایش

@container scroll-state(scrollable: top) {}
@container scroll-state(scrollable: right) {}
@container scroll-state(scrollable: bottom) {}
@container scroll-state(scrollable: left) {}

فهرست کامل نحو

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

همچنین توجه داشته باشید، این اولین ظرفی است که هم size و هم scroll-state دارد.

https://codepen.io/web-dot-dev/pen/OPLZWBj

.scroll-container {
  container-type: scroll-state size;
  overflow: auto;

  &::after {
    content: " ";

    background: var(--_shadow-top), var(--_shadow-bottom);
    transition: 
      --_scroll-shadow-color-1-opacity .5s ease,
      --_scroll-shadow-color-2-opacity .5s ease;

    @container scroll-state(scrollable: top) {
      --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%);
    }

    @container scroll-state(scrollable: bottom) {
      --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%);
    }
  }
}

پیکان اعلان

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
}

@container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
  rotate: .5turn;
}

بازگشت به بالا

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container not scroll-state(scrollable: top) {
  translate: 0 calc(100% + 10px);
}

ادامه مطالعه

چه چیز دیگری باید بتوانیم پرس و جوی کانتینری داشته باشیم؟ https://github.com/w3c/csswg-drafts/issues/5989
توضیح scroll-state() - https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.md
scroll-state() مشخصات CSS - https://www.w3.org/TR/css-conditional-5/#scroll-state-container
عکس فوری چیدمان در حلقه رویداد HTML
یک قسمت پادکست در مورد درخواست های وضعیت - https://nerdy.dev/the-css-podcast-on-state-queries
مقالات بیشتر
- https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css/
- https://ishadeed.com/article/css-state-queries/
- https://csscade.com/can-you-detect-overflow-with-css/
- https://css-tip.com/overflow-detection/ - تشخیص با اسکرول متحرک به روشی که بیشتر از کودکان می توانند بدانند (با تقلب)