ویژگی CSS overscroll-behavior یک ویژگی اختصاری است که تعیین می‌کند که مرورگر در هنگام رسیدن به مرز یک ناحیه پیمایشی چه کاری انجام دهد.
ویژگی‌های تشکیل‌دهنده این ویژگی overscroll-behavior-x و overscroll-behavior-y هستند.
پیمایش زنجیره‌ای رفتاری است که در آن زمانی که کاربر به مرز (بالا، پایین، چپ یا راست) یک عنصر پیمایش‌پذیر می‌رسد، پیمایش روی یک عنصر والد رخ می‌دهد. این اثر زنجیره‌ای در پیمایش ایجاد می‌کند.
به عنوان مثال، اگر یک باکس دیالوگ مدال در صفحه وب داشته باشید که دارای محتوایی است که به صورت عمودی می‌توان پیمایش کرد. در هنگام رسیدن به انتهای ناحیه پیمایش‌پذیر این باکس، پیمایش ادامه پیدا می‌کند و روی محتوای صفحه اصلی که پشت باکس دیالوگ مدال قرار دارد ادامه می‌یابد. این تجربه پیمایش مداوم به عنوان پیمایش زنجیره‌ای شناخته می‌شود.
این رفتار ممکن است مطلوب یا نامطلوب باشد و به منظور اجتناب از آن، ویژگی overscroll-behavior استفاده می‌شود. این ویژگی فقط در مخازن قابل پیمایش اعمال می‌شود. تنظیم این ویژگی بر روی عنصر <iframe> هیچ تأثیری ندارد و بنابراین باید آن را بر روی هر دو عنصر <html> و <body> اسناد <iframe> تنظیم کرد.
مقادیر ممکن ویژگی CSS overscroll-behavior به عنوان یک یا دو از کلمات کلیدی زیر تعریف می‌شود. دو کلمه کلیدی مقدار را در محورهای x و y به ترتیب مشخص می‌کند. هنگامی که فقط یک مقدار مشخص می‌شود، هر دو محور x و y دارای همان مقدار هستند.
- auto: رفتار پیمایش پیش‌فرض عادی است.
- contain: رفتار پیمایش فقط در عنصری مشاهده می‌شود که مقدار آن تنظیم شده است. هیچ پیمایشی در عناصر همسایه تنظیم نمی‌شود.
- none: هیچ رفتار پیمایش زنجیره‌ای دیده نمی‌شود. رفتار پیش‌فرض سرریز پیمایش اجتناب می‌شود.
اعمال بر روی تمام عناصر بلوکی غیر جایگزین و عناصر بلوک شده غیر جایگزین.
سینتکس:
overscroll-behavior = [ contain | auto | none ]{1,2}auto Value
این قطعه کد نشان می‌دهد چگونه از ویژگی overscroll-behavior با مقدار auto استفاده شود که اثر پیمایش را به صورت مداوم تنظیم می‌کند. بنابراین هنگام رسیدن به مرز عنصر قابل پیمایش، با پیمایش، عنصر والد پیمایش می‌شود.
این قطعه کد یک مربع نمایش را نشان می‌دهد که ویژگی overscroll-behavior به عنوان auto تنظیم شده است که موجب می‌شود هنگام رسیدن به مرز عنصر قابل پیمایش، عنصر والد پیمایش شود. هنگامی که با موس اسکرول می‌کنید، متوجه می‌شوید که پس از کامل شدن پیمایش مربع آبی، پیمایش روی عنصر والد ادامه پیدا می‌کند.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
border: 2px solid black;
}
#main-box {
display: flex;
flex-wrap: wrap;
background-color: cornsilk;
height: 800px;
}
#box-1 {
background-color: lightblue;
overscroll-behavior: auto;
}
#main-box > div {
flex: 1;
height: 150px;
}
</style>
</head>
<body>
<h1>overscroll-behavior Property</h1>
<p>The box displayed below has overscroll-behavior set as auto, which is the default value.</p>
<p>Scroll the blue box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>
<div id="main-box">
<div id="box-1">
<h2>overscroll-behavior: auto</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.</p>
</div>
</div>
</body>
</html>Comparison of Values
این مثال نشان می‌دهد که چگونه ویژگی overscroll-behavior با مقدار contain عمل می‌کند که تأثیر پیمایش را محدود به عنصری که بر روی آن اعمال شده است، قرار می‌دهد. بنابراین هنگام رسیدن به مرز عنصر قابل پیمایش، در هنگام پیمایش، عنصر والد اسکرول نمی‌شود.
در این مثال، دو جعبه نشان داده شده است که دارای مقادیر overscroll-behavior به ترتیب auto و contain هستند. اولین جعبه با پیمایش، عملکرد معمولی را دارد و والد آن نیز همزمان با آن حرکت می‌کند. اما در مورد دوم، عملکرد پیمایش محدود شده است و والد اسکرول نمی‌شود.
<html>
<head>
<style>
div {
margin: 5px 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
border: 2px solid black;
}
#main-box {
display: flex;
flex-wrap: wrap;
background-color: darkcyan;
height: 800px;
}
#box-1 {
background-color: pink;
}
#box-2 {
background-color: aliceblue;
overscroll-behavior: contain;
}
#main-box > div {
flex: 1;
height: 150px;
}
</style>
</head>
<body>
<h1>overscroll-behavior Property</h1>
<p>The two boxes displayed below has overscroll-behavior set as auto and contain, respectively.</p>
<p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>
<p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p>
<div id="main-box">
<div id="box-1">
<h3>overscroll-behavior: auto</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
<div id="box-2">
<h3>overscroll-behavior: contain</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
</div>
</body>
</html>Two Keyword Values
در این مثال، از ویژگی overscroll-behavior با مقادیر auto و contain (دو مقدار) استفاده شده است. این بدان معناست که اسکرول بر روی محور x به صورت خودکار انجام شده و بر روی محور y محدود شده است. بنابراین، هنگام رسیدن به مرز عمودی عنصر قابل اسکرول، هیچ اسکرولی روی والد آن انجام نمی‌شود (به دلیل وجود مقدار contain)، اما مرز افقی به صورت خودکار تنظیم شده است که منجر به اسکرول والد بر روی محور x می‌شود.
<html>
<head>
<style>
#main-box, #box-2 {
margin: 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
}
#main-box p {
width: 200%;
}
#main-box {
background-color: rgb(197, 255, 236);
height: 1300px;
width: 2000px;
}
#box-2 {
float: left;
height: 250px;
width: 30%;
background-color: rgb(255, 205, 213);
overscroll-behavior: auto none;
}
</style>
</head>
<body>
<h1>overscroll-behavior - Two value Syntax</h1>
<p>The two value syntax is used with overscroll-behavior as auto on x axis and none on y-axis.</p>
<div id="main-box">
<div id="box-2">
<h3>overscroll-behavior: auto none</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
</div>
</body>
</html>Associated Properties
ویژگی‌های مرتبط با ویژگی overscroll-behavior در CSS عبارتند از:
-
overscroll-behavior-x: این ویژگی تعیین می‌کند که مرورگر چه عملکردی را انجام دهد زمانی که مرز افقی یک ناحیه اسکرول رسیده شود.
-
overscroll-behavior-y: این ویژگی تعیین می‌کند که مرورگر چه عملکردی را انجام دهد زمانی که مرز عمودی یک ناحیه اسکرول رسیده شود.
-
overscroll-behavior-block: این ویژگی تعیین می‌کند که مرورگر چه عملکردی را انجام دهد زمانی که مرز جهت بلوک یک ناحیه اسکرول رسیده شود.
-
overscroll-behavior-inline: این ویژگی تعیین می‌کند که مرورگر چه عملکردی را انجام دهد زمانی که مرز جهت درون خطی یک ناحیه اسکرول رسیده شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام