اسکرول افقی css. بخش پیمایش

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

در عمل (در حین چیدمان یا ویرایش)، اغلب با چنین موقعیت هایی مواجه می شویم، بنابراین برای بسیاری مفید خواهد بود. علاوه بر این، در طول مسیر، به تغییرات نیز خواهیم پرداخت از این ملک overflow-x و overflow-y که مورد خاصی هستند و ویژگی های خاص خود را دارند. همچنین قانون سرریز متن مجاور را لمس خواهیم کرد، که نمایان بودن متن را در بلوکی که فراتر از مرزهای یک عنصر است، تعیین می کند.

البته، در بسیاری از موارد، شما نمی توانید بدون تعیین ابعاد خاص منطقه از طریق عرض و ارتفاع (عرض و ارتفاع جعبه) که می توانید انجام دهید. به طور کلی، در زیر نمونه هایی از تأثیر خاصیت سرریز را به تمام روش های ممکن در نظر خواهیم گرفت.

سرریز (قابل مشاهده، پنهان) - محتوای قابل مشاهده یا پنهان یک بلوک که فراتر از محدودیت های آن است

ابتدا، به پیروی از سنت، بیایید ببینیم چه مقادیری در جدول مشخصات کنسرسیوم بین المللی W3C وجود دارد (داده ها مطابق نسخه CSS2.1 ارائه شده اند، اگرچه در موارد بیشتری معتبر و پشتیبانی می شوند. نسخه جدید CSS3):

همانطور که می بینید، سرریز دارای 4 پارامتر اصلی (قابل مشاهده، پنهان، خودکار، اسکرول) و ارزش به ارث بردن، که در صورت تمایل می توانید آن را بنویسید، اما به طور پیش فرض این قانون به ارث نمی رسد ( موروثی: خیردر اسکرین شات). مقدار پیش فرض visibl (ابتدایی: قابل مشاهده) است.

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

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

بیایید یک ظرف DIV را به عنوان مثال در نظر بگیریم (در جزئیات بیشتر در مورد divs به عنوان پایه طرح بلوک)، آن را با پس زمینه، از طریق ویژگی style رنگ کنید و آن را داخل آن قرار دهید متن دلخواه:

نتیجه نهایی چیزی شبیه به این خواهد بود:

عرض ظرف را تعریف نکرده ایم. در این حالت، اگر به خاطر داشته باشید، عنصر بلوک تمام فضای موجود را در عرض اشغال می کند. اما ارتفاع (ارتفاع) بلوک، اگر مشخص نشده باشد، با محتوا (در مثال ما، متن موجود در آنجا) تعیین می شود.

قانون سرریز برای بلوک های حاوی محتوایی که در ارتفاع قابل توزیع نیست

در بالا، مثالی را پیشنهاد کردم که در آن یک عنصر بلوک حاوی متنی است که می‌تواند در صورت محدود بودن عرض (با تغییر کلمه wrap) دوباره توزیع شود. این در حال حاضر به ویژه در هنگام درخواست صادق است طراحی تعاملیبرای مشاهده در تلفن همراه با این حال، اتفاق می افتد که محتوا، به دلایلی، چندان انعطاف پذیر نیست.

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

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

افزودن اسکرول با استفاده از پارامترهای اسکرول و خودکار قانون سرریز

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

در نتیجه، نوارهای پیمایش به صورت عمودی و افقی ظاهر شدند:

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

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

قانون سرریز متن CSS (کلیپ، بیضی)

حال بیایید با اصلاح خاصیت سرریز که در بالا توضیح داده شد، که فقط در CSS3 ظاهر شد، آشنا شویم. می توانید اطلاعات مربوط به او را در صفحه رسمی مربوطه (پیش نویس سرمقاله کنسرسیوم W3C) دریافت کنید:

ویژگی سرریز متندارای 2 معنی اصلی (گیره و بیضی). فقط زمانی اثر می‌گذارد که سرریز مشخص شده باشد، که مقداری غیر از قابل مشاهده باشد. و این، همانطور که به یاد دارید، پارامتر پیش‌فرض است، بنابراین استایل‌های عنصر مربوطه باید دارای سرریز با hidden، scroll یا auto باشند.

کلیپ پیش فرض است و فقط متن را کلیپ می کند. بنابراین، سرریز متن را برای DIV خود با ویژگی‌های CSS مناسب با افزودن فضای سفید: nowrap (برای جلوگیری از بسته‌بندی کلمه) فعال می‌کنیم:

همانطور که می بینید ellipsis به شما امکان می دهد بیضی اضافه کنیدبه جای متن بریده شده، اشاره ای به ادامه آن دارد. تا یک نتیجه منطقی بدهیم این مثال، می توانید شبه کلاس شناور را برای div اضافه کنید، که وقتی ماوس را بر روی عنصر قرار می دهید، سبک آن را تغییر می دهد:

کلاس 1: شناور (سرریز: قابل مشاهده؛ فضای سفید: عادی؛)

اکنون متن قطع می شود، اما اگر نشانگر ماوس را روی آن ببرید، در ظاهر می شود تمام و کمال... با کلیک بر روی لینک ارائه شده می توانید این موضوع را تأیید کنید.

3. اسکرول عمودی و افقی را در یک بلوک CSS اجباری کنید
4. نمونه بلوک اسکرول div

در این مقاله به بررسی موضوع ایجاد بلوک (div) با اندازه ثابت با قابلیت اسکرول افقی و عمودی می پردازیم. این را می توان اجرا کرد با استفاده از CSS... مسئول این امر است دارایی سرریز.

درباره سرریز اموال مفید

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

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

کد CSS

پروکروتکا (
سرریز: خودکار; ویژگی / * برای اسکرول افقی. خودکار اگر محتوا بزرگتر از بلوک باشد * /
}

خواص و مقادیر سرریز

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

نمونه ای از کلاس CSS را در نظر بگیرید. در عرض و ارتفاع، عرض و ارتفاع بلوک مورد نظر را تنظیم می کنیم (محتویات بلوک از آنها فراتر نمی رود) و با خاصیت سرریز: auto; در صورت لزوم پیمایش افقی را تنظیم کنید

کد CSS

پروکروتکا (
عرض: 150 پیکسل؛ / * عرض بلوک ما * /
ارتفاع: 100 پیکسل؛ / * ارتفاع بلوک ما * /


سرریز: خودکار; ویژگی / * برای اسکرول افقی. خودکار در صورت وجود بلوک بیشتر * /
}

پیمایش اجباری در یک بلوک CSS

همچنین می توانید پیمایش را در ارتفاع و عرض اجباری کنید. برای انجام این کار، هر محور: overflow-y: scroll; (عمودی) overflow-x: scroll; (افقی) ما پارامتر اسکرول، پیمایش اجباری را مشخص می کنیم.

کد HTML و CSS

پروکروتکا (
ارتفاع: 150px; / * ارتفاع بلوک ما * /
پس زمینه: #fff; / * رنگ پس زمینه، سفید * /
حاشیه: 1px جامد # C1C1C1; / * اندازه و رنگ حاشیه بلوک * /


}

نمونه بلوک اسکرول div

کد HTML و CSS

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

دستورالعمل ها

اگر می خواهید نوار اسکرول را نه برای کل صفحه، بلکه فقط برای یک منطقه محدود از آن، از یک تگ div استفاده کنید. V زبان HTML(زبان نشانه گذاری HyperText - "Hypertext Markup Language") "برچسب ها" به دستورات جداگانه ای برای مرورگر برای نمایش یک عنصر خاص از صفحه اشاره دارد. در بسیار فرم سادهیک تگ div (اغلب به عنوان "لایه" نامیده می شود) مانند این:

اینجا - بسته شدن هر چیزی که بین تگ های باز و بسته قرار می گیرد مانند ظرف در لایه قرار می گیرد و این ظرف را می توان ابعاد - عرض و ارتفاع داد. این کار با پارامتر اضافیسبک ("ویژگی") که از تگ آغازین پیروی می کند: