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

طول خواهد کشید

لایه اندازه ثابت و سبک CSS.

CSS

کلاس .scroll CSS پارامترهای 600px طول و 300px ارتفاع، padding، حاشیه و رنگ پس‌زمینه را تنظیم می‌کند. ولی! مهمتر از همه، پارامتر سرریز: خودکار نوار اسکرول را تنظیم می کند تا زمانی که مقدار متن بزرگتر از اندازه لایه است ظاهر شود.

پیمایش (عرض: 500 پیکسل؛ ارتفاع: 300 پیکسل؛ / * اندازه ثابت مورد نیاز * / سرریز: خودکار؛ / * پیمایش در صورت نیاز ظاهر می‌شود * / بالشتک: 10 پیکسل 20 پیکسل؛ حاشیه: # 999 1 پیکسل؛ رنگ پس‌زمینه: #FAFAFA؛)

Html

نتیجه

در صفحه یک قاب کوچک با متن و یک حاشیه را مشاهده خواهید کرد خاکستری.

رایج ترین آنها خنک کننده های اتیلن گلیکول بر پایه اتیلن گلیکول و آب (مقطر) با مجموعه ای از مواد افزودنی است.

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

عمر مفید خنک کننده هایی مانند "توسول" و "لنا" با عمر مفید مواد افزودنی محدود می شود و معمولاً 2 سال است. میانگین مسافت پیموده شده برای خودروهای مختلف 50000 کیلومتر است.

هنگامی که برای اولین بار یک وسیله نقلیه دست دوم را سرویس می کنید، مایع خنک کننده باید تعویض شود. پس از تخلیه مایع قدیمی، سیستم را با آب تمیز پر کنید، موتور را روشن کنید و بگذارید 15-20 دقیقه در حالت بیکار بماند. سپس آب را تخلیه کرده و سیستم را با خنک کننده جدید پر کنید.

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

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

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

خیلی خوب است اگر بتوانیم اینگونه عمل کنیم:

/ * کد جعلی * / div (جهت اسکرول: افقی؛)

/ * کد جعلی * / div ( اسکرول - جهت: افقی.

متاسفانه این اتفاق نخواهد افتاد. این حتی در برنامه های CSS نیز وجود ندارد.

این بسیار بد است، زیرا در شرکتی که من برای آن کار می کنم بسیار مفید خواهد بود. ما ارائه‌های زیادی انجام می‌دهیم، و ارائه یک چیز کاملاً افقی است. معمولاً نسبت تصویر اسلایدها 4: 3 یا 16: 9 است. به همین دلیل، ما داریم مشکل دائمیبا اسلایدهای افقی و فناوری های وب عمودی. منظورم از "ما" خودم هستم. اما چیزی که من دوست دارم سختی آن است.

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

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

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

همه ما می دانیم که راه های زیادی برای انجام اسکرول افقی در جاوا اسکریپت وجود دارد. چند نمونه در CSS-Tricks وجود دارد. تعجب کردم که آیا امکان ترجمه این ایده وجود دارد یا خیر CSS خالص... راه حل بسیار ساده بود:

یک ظرف با عناصر ایجاد کنید.

ظرف را 90 درجه در خلاف جهت عقربه های ساعت بچرخانید تا لبه پایینی در سمت راست باشد.

عناصر داخل ظرف را به جای خود بچرخانید.

مرحله 1) ظرف را ایجاد کنید

ايجاد كردن بلوک divبا بسیاری عناصر کودک.

در مثال ما، ظرف قابل پیمایش 300 پیکسل عرض دارد و شامل 8 عنصر 100×100 پیکسل است. اندازه ها دلخواه هستند، می توانید هر کدام را تنظیم کنید.

< div class = "مربع های اسکرول افقی"> < div >مورد 1< / div > < div >مورد 2< / div > < div >مورد 3< / div > < div >مورد 4< / div > < div >مورد 5< / div > < div >مورد 6< / div > < div >مورد 7< / div > < div >مورد 8< / div > < / div >

ارتفاع ظرف به عرض تبدیل می شود و بالعکس. زیر "عرض" ظرف 300 پیکسل خواهد بود:

افقی اسکرول لفاف (عرض: 100 پیکسل؛ ارتفاع: 300 پیکسل؛ سرریز-y: خودکار؛ سرریز-x: پنهان؛)

عرض: 100 پیکسل؛ ارتفاع: 300 پیکسل؛ سرریز - y: خودکار; سرریز - x: پنهان.

و بچه ها:

Horizontal-scroll-wrapper> div (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛)

افقی - اسکرول - wrapper> div ( عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛

مرحله 2) ظرف را بچرخانید

اکنون باید ظرف را 90- درجه بچرخانید کمک CSS تبدیل خواص... ما یک اسکرول افقی گرفتیم.

Horizontal-scroll-wrapper (... transform: rotate (-90 deg)؛ transform-origin: بالا سمت راست; }

افقی - اسکرول - لفاف ( . . . تبدیل: چرخش (-90 درجه)؛

فقط یک مشکل کوچک وجود دارد: بچه ها با ظرف می چرخیدند.

مرحله 3) بچه ها را در جای خود قرار دهید

بنابراین چگونه می توانید اقلام را به جای خود بازگردانید؟ با استفاده از ویژگی transform CSS آن را به عقب بچرخانید.

Horizontal-scroll-wrapper> div (... تبدیل: چرخش (90 درجه)؛ مبدا تبدیل: سمت راست بالا؛)

افقی - اسکرول - wrapper> div ( . . . تبدیل: چرخش (90 درجه)؛ تبدیل - مبدا: سمت راست بالا;

مرحله 4) موقعیت یابی ثابت

به نظر خوب است، اما چند مشکل وجود دارد.

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

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

سازگاری

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

دسکتاپ

از آنجایی که سبک اسکرول‌ها تاکنون فقط در مرورگرهای Webkit/Blink کار می‌کند، یک نوار پیمایش خاکستری معمولی در فایرفاکس و IE نشان داده شده است. این را می توان با JS برطرف کرد و به طور کلی پنهان کرد، اما این موضوع برای آموزش دیگری است.

پیمایش با چرخ ماوس روی دسکتاپ عالی عمل می کند. اما لپ تاپ من نظر خودش را در این مورد دارد. در دستگاه‌های دارای صفحه‌نمایش لمسی و پد لمسی، دمو به گونه‌ای عمل می‌کند که گویی div اصلاً چرخانده نشده است.

دستگاه های موبایل

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

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

نتیجه

طبق وب سایت Can I Use، تغییرات در CSS اکنون توسط 93٪ + از کاربران پشتیبانی می شود (در زمان نگارش این مقاله، نوامبر 2016). این نباید مشکلی باشد

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

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

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

Overflow در CSS مسئول نحوه نمایش اطلاعات در یک بلوک است اگر محتوا از ارتفاع یا عرض این بلوک بیشتر شود. این ویژگی فقط برای عناصر بلوک(نمایش: بلوک؛ یا آنهایی که در ابتدا بلوک هستند - div و غیره).

مقادیر احتمالی که این ویژگی می گیرد (به طور پیش فرض قابل مشاهده است):

• Visible - کل محتوای عنصر را حتی فراتر از ارتفاع و عرض مشخص شده نمایش می دهد.
• Hidden - فقط قسمت داخل عنصر نمایش داده می شود، بقیه پنهان می شوند.
• اسکرول - نوارهای پیمایش همیشه اضافه می شوند.
• خودکار - نوارهای اسکرول فقط در صورت نیاز اضافه می شوند.
• ارث بردن - مقدار را از والدین به ارث می برد.

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

در نسخه ی نمایشی، می توانید نحوه عملکرد هر یک از مقادیر ویژگی ها را مشاهده کنید:

کد HTML

بدنه (حاشیه: 0 0 0 0؛ بالشتک: 0 0 60 پیکسل 0؛ اندازه قلم: 16 پیکسل؛) h2 (رنگ: # CC0033;) div (عرض: 200 پیکسل؛ / * عرض ثابت* / ارتفاع: 300 پیکسل؛ / * ارتفاع ثابت * / حاشیه: 1px جامد # 555; padding: 4px; حاشیه: 4 پیکسل شناور به سمت چپ؛ ) .VisibleDiv (سرریز: قابل مشاهده؛) .HiddenDiv (سرریز: پنهان؛) .ScrollDiv (سرریز: اسکرول؛) .AutoDiv (سرریز: خودکار؛)

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

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

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

بلوک دیگری در زیر بلوک VisibleDiv وجود دارد.

هیچ چیزی در زیر بلوک VisibleDiv وجود ندارد

بدنه (حاشیه: 0 0 0 0؛ بالشتک: 0 0 60 پیکسل 0؛ اندازه قلم: 16 پیکسل؛) h2 (رنگ: # CC0033;) p (شناور: چپ؛) div (عرض: 500 پیکسل؛ ارتفاع: خودکار؛ حاشیه: 1px solid # 555؛ بالشتک: 4px؛ حاشیه: 4px؛). FFFFFF؛ وزن قلم: پررنگ؛)

در حالت اول، می بینید که محتوای دارای ویژگی float از بلوک خارج می شود و هنگام تعیین ارتفاع بلوک توسط آن در نظر گرفته نمی شود، در حالت دوم، زیر بلوک با سرریز: قابل مشاهده; بلوک دیگری به طور خاص قرار داده شده و به رنگ دیگری سایه زده شده است. اینها تنها نمونه هایی نیستند که نشان می دهد این بلوک ها چگونه می توانند در صفحه رفتار کنند (با سرریز: قابل مشاهده؛ و ارتفاع: خودکار؛). این را می توان با جایگزینی مقدار قابل مشاهده با hidden برطرف کرد، باید به خاطر داشت که این ویژگی باید فقط برای بلوک های با ارتفاع مشخص شود: auto; اگر ارتفاع ثابتی وجود داشته باشد، اگر بیشتر از ارتفاع مشخص شده باشد، احتمال زیادی وجود دارد که محتوا به سادگی پنهان شود.

این همان چیزی است که نسخه اصلاح شده به نظر می رسد:

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

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

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

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