یکشنبه ۲۳ مرداد ۱۴۰۱

Sunday, August 14, 2022 GMT +4:30

حذف اسکرول افقی (Horizontal Scroll) با CSS

css-horizontal-scroll

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

چرا اسکرول افقی در صفحه وب ایجاد می شود؟


علت عمده بروز مشکل نمایش اسکرول بار افقی در صفحات وب به تعریف نادرست یا ناهماهنگ عرض عناصر HTML صفحه و استایل دهی آنها در CSS مربوط می شود، به طور مثال اگر بلاکی با عرض 200 پیکسل را در بلاکی دیگر با عرض 190 پیکسل قرار دهیم مسلما در حالت عادی با مشکل نمایش اسکرول بار افقی مواجه خواهیم شد، یا به فرض اگر در ساختار و اسکلت بندی قالب سایت یا وبلاگمان عرض زیادی برای چارچوب کار در نظر بگیریم که این عرض از اندازه صفحه نمایش کاربران بیشتر باشد، مرورگر به صورت خودکار اسکرول افقی را نمایش خواهد داد، مثال دیگر در این خصوص اشتباه در مقداردهی درصدی در حین طراحی قالب های واکنش گرا (Responsive) یا نسخه های مخصوص موبایل است، به فرض اگر بلاک والد 100 درصد عرض داشته باشد و برای بلاک فرزند آن نیز 100 درصد عرض در نظر بگیریم، تعیین مقادیر padding برای بلاک فرزند می تواند عرض بلاک والد را به بیش از عرض صفحه نمایش افزایش داده و در نهایت در انتهای صفحه اسکرول افقی ظاهر شود.
<style>
.parent {
    width: 100%;
    height: 200px;
    background: #107FE7;
}
.child {
    width: 100%;
    height: 100px;
    background: #CFE023;
    padding: 20px;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
اگر این نمونه کد را در یک فایل HTML درج کرده و در مرورگر اجرا کنیم، به احتمال زیاد نوار اسکرول افقی در انتهای صفحه ظاهر خواهد شد یا بخشی از محتوا در گوشی تلفن همراه از دید کاربر مخفی می شود.

چرا باید اسکرول افقی را حذف کنیم؟


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

راه حل حذف اسکرول افقی با CSS


قاعدتا نخستین اقدامی که برای حذف اسکرول افقی باید انجام دهیم پیدا کردن علت اصلی مشکل است، معمولا این حالت زمانی رخ می دهد که به هر دلیل عرض کلی صفحه وب از عرض صفحه نمایش بیشتر باشد، در نظر گرفتن مقادیر نادرست یا محاسبه اشتباه اندازه ها در خاصیت هایی مانند width، padding، border و مواردی از این قبیل می تواند باعث ایجاد عرض ناخواسته شده و در نهایت نتیجه به صورت اسکرول افقی دیده شود، در این صورت با بررسی مجدد سورس کدهای استایل CSS و محاسبه دقیق و تعیین اندازه های درست می توانیم مشکل را رفع کنیم.
راه حل دیگر از بین بردن یا حداقل مخفی کردن اسکرول استفاده از خاصیت overflow به صورت نمونه زیر است:
<style>
.class {
    /* auto, scroll, visible */
    overflow: hidden;
}
</style>
اما این ویژگی بیشتر در اسکرول عمودی کاربرد دارد و برای اسکرول افقی باید آن را به صورت زیر تغییر دهیم:
<style>
.class{
     /* حذف اسکرول افقی */
    overflow-x: hidden;
    /* اسکرول عمودی */
    overflow-y: auto;
}
</style>
این شیوه را می توانیم در یک کلاس تعریف کرده و کلاس را به بلاک مورد نظر یا تگ body (برای از بین بردن اسکرول افقی در کل صفحه) نسبت دهیم.

مشکل ناسازگاری overflow-x در برخی از مرورگرهای قدیمی


در برخی از نسخه های قدیمی (ماقبل 3.5) مرورگر فایرفاکس ممکن است خاصیت overflow-x به درستی عمل نکند، هرچند امروزه اغلب کاربران از نسخه های به روز مرورگرها استفاده می کنند اما جهت اطلاعات بیشتر برای این نوع مرورگرها کد بالا را با افزودن مقادیر moz-scrollbars-vertical کامل می کنیم:
<style>
.class{
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;
}
</style>
یادآور می شویم در مرورگرهای جدید دیگر نیازی به درج این مقدار نیست و صرفا جهت اطلاعات بیشتر مطرح شده است.

حذف اسکرول بار تگ textarea


خاصیت overflow-x را می توانیم برای حذف اسکرول بار تگ textarea در فرم های HTML نیز استفاده کنیم، علاوه بر این با خاصیت های صرف HTML و بدون CSS نیز می توان اسکرول افقی textarea را در فرم ها حذف کرد که بدین منظور از صفت wrap و مقدار virtual استفاده می کنیم:
<textarea wrap="virtual" cols="20" rows="10"></textarea>
دسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
ساخت بلاک شناور عمودی با CSS
مخفی کردن عناصر وب با CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
دیدگاه
more ۳۴ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: رضا
۱۸:۵۲ ۱۳۹۹/۰۹/۳۰
سلام
چند وقت پیش اسکرول سایت من کار می کرد اما الان اثری ازش نیست میشه دوباره نشان داده بشه؟
Baha9.ir
پاسخ: 
سایتتان بررسی شد، اسکرول عمودی بدون مشکل فعال است اسکرول افقی هم با توجه به نبود محتوایی خارج از عرض استاندارد قالب دیده نمی شود که خبر خوبی است!
نویسنده: مجید
۱۱:۴۵ ۱۴۰۰/۰۴/۰۷
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .
نویسنده: محمود
۰۹:۲۸ ۱۴۰۰/۰۴/۳۰
سلام مهندس
چگونه می شود میزان حرکت اسکرول را تعیین کرد. یعنی با یه حرکت غلطک موس صفحه بعدی در کادر قرار بگیرد. به عنوان مثال، اسلاید های موجود در سایت باید کلی غلطک موس را بچرخانی تا اسلاید پاینتر ظاهر شود. ولی اگر بشود با یه اشارۀ غلطک اسلاید پایینی وارد کادر بشه خوب خواهد شد.
با تشکر.
پاسخ: 
برای اسکرول یکباره به اسلاید بعدی باید از جاوا اسکریپت استفاده کنیم، در سورس نمونه صفحه زیر این کار برای 3 اسلاید انجام شده که با پیروی از الگو می توانیم تعداد بیشتری اسلاید در نظر بگیریم (کد در حداقل زمان ممکن نوشته شده و ممکن است نیاز به بهینه سازی بیشتری داشته باشد):
https://webgoo.ir/example/javascript/javascript-scroll-to-next.html
متاسفانه متدهای استانداردی که با تمام مرورگرها سازگار باشند در این خصوص به راحتی در دسترس نیست و باید زمان زیادی صرف سازگاری کد کرد، نمونه کد بالا تا حد امکان با مرورگرهای مختلف سازگار شده است.
نویسنده: ستاره
۱۰:۱۵ ۱۴۰۱/۰۴/۰۴
سلام وقت بخیر کدها رو دقیقا کجا قرار بدیم؟
پاسخ: 
ابتدا باید بررسی کنیم و ببینیم کدام عنصر HTML در صفحه باعث بروز اسکرول افقی شده است برای این کار در مرورگرهایی مانند فایرفاکس با فشردن دکمه F12 از قسمت کنسول اقدام به آزمایش و خطا و حذف یا تغییر ابعاد عناصر صفحه می کنیم تا جایی که اسکرول افقی محو شود، پس از پیدا کردن عنصر علت مشکل می توانیم در استایل CSS آن عنصر، ویرایش های دلخواه را انجام دهیم.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- تمام دیدگاه ها خوانده شده و برای هر کاربر مدت زمان محدودی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.
- در مواردی که امکان رفع مشکل در زمان متداول میسر نباشد ممکن است نیاز به ارجاع و ثبت سفارش در بخش برنامه نویسی باشد که در اینصورت اطلاع رسانی خواهد شد.



 refresh
10 × 10
1 × 9
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
دانیال
در:
سلام مجدد این شکلی وارد می کنم
۱۴۰۱/۰۵/۲۳

دانیال
در:
سلام، ببخشید من برای تبدیل لینک این کد رو در htaccess نوشتم آدرس کار می کند ولی مشکل این هست که php به من...
۱۴۰۱/۰۵/۲۲

ali
در:
با سلام کلا دستورات جاوا اسکریپ رو چطوری باید به قالب های آماده وردپرس اضافه کنیم؟ مثلا innerHtml که استایل های داخل Html را...
۱۴۰۱/۰۵/۲۲

امیر
در:
با سلام و درود بر شما استاد بسیار عالی بود کارم درست شد از لطف و محبتتون بسیار ممنون و سپاسگزارم در...
۱۴۰۱/۰۵/۱۵

امیر
در:
با سلام و خسته نباشید استاد من دو تا اکشن دارم editp و editpost دسترسی کاربران رو به این دو تا اکشن تعریف کردم...
۱۴۰۱/۰۵/۱۳

امیرحسین
در:
سلام وقت بخیر، من میخواستم داخل شی گرایی php وقتی یک متودی صدا زده میشه چک کنه ببینه اجازه اجرا شدنو داره یا خیر یعنی...
۱۴۰۱/۰۵/۱۲

امیرحسین
در:
سلام استاد وقت بخیر من یه الگویی نوشتم: هر چقدر تعداد داشت محدودیتی نداشته باشه و تک تک عدد های بین کاما را...
۱۴۰۱/۰۵/۰۹

سعید
در:
باسلام با تشکر از شما درست بود و مشکلی نداشت در پناه خدای بزرگ باشید
۱۴۰۱/۰۵/۰۸

سعید
در:
با سلام و خسته نباشید شرط های زیر رو نگاه کنید: اگه دقت کنید می بینید که جفت شرط ها شبیه هم هستند....
۱۴۰۱/۰۵/۰۷

majid
در:
سلام ممنون از آموزشتون اگر بخوایم درون کامنت سایت های خارجی هم لغت لینک دار وارد کنیم با این کدها میشه؟
۱۴۰۱/۰۵/۰۲

امید سلمانی
در:
برای لینک دار کردن عکس از چه خروجی در html استفاده کنیم برای ذخیره سازی من ذخیره می کنم ولی عکس html است من می...
۱۴۰۱/۰۵/۰۲

پـــرتو
در:
چشم در اولین فرصت ارسال می کنم
۱۴۰۱/۰۴/۳۰

پرتو
در:
بعد دیگ اینک یه سوال این رنگ پس زمینه ابی رنگ توی نوار منو افقی کجاست یعنی اینک رنگش کدومه ممنون میشم بگین منتظر جوابتون...
۱۴۰۱/۰۴/۲۸

پرتو
در:
سلام خسته نباشید ببخشید بلاگفا از شمام قطعه یا فقط مال من اینطوریه بعد اینک درست میشه یا نه؟
۱۴۰۱/۰۴/۲۸
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.