شنبه ۱۲ فروردین ۱۴۰۲

Saturday, April 1, 2023 GMT +3: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
چسبیدن فوتر قالب به پائین صفحه با CSS
آموزش استفاده از فونت فارسی در وب با CSS
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
ساخت منوی کشویی با تگ ul li و CSS
دیدگاه
more ۳۵ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
رضا
۱۸:۵۲ ۱۳۹۹/۰۹/۳۰
سلام
چند وقت پیش اسکرول سایت من کار می کرد اما الان اثری ازش نیست میشه دوباره نشان داده بشه؟
Baha9.ir
سایتتان بررسی شد، اسکرول عمودی بدون مشکل فعال است اسکرول افقی هم با توجه به نبود محتوایی خارج از عرض استاندارد قالب دیده نمی شود که خبر خوبی است!
مجید
۱۱:۴۵ ۱۴۰۰/۰۴/۰۷
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .
محمود
۰۹:۲۸ ۱۴۰۰/۰۴/۳۰
سلام مهندس
چگونه می شود میزان حرکت اسکرول را تعیین کرد. یعنی با یه حرکت غلطک موس صفحه بعدی در کادر قرار بگیرد. به عنوان مثال، اسلاید های موجود در سایت باید کلی غلطک موس را بچرخانی تا اسلاید پاینتر ظاهر شود. ولی اگر بشود با یه اشارۀ غلطک اسلاید پایینی وارد کادر بشه خوب خواهد شد.
با تشکر.
برای اسکرول یکباره به اسلاید بعدی باید از جاوا اسکریپت استفاده کنیم، در سورس نمونه صفحه زیر این کار برای 3 اسلاید انجام شده که با پیروی از الگو می توانیم تعداد بیشتری اسلاید در نظر بگیریم (کد در حداقل زمان ممکن نوشته شده و ممکن است نیاز به بهینه سازی بیشتری داشته باشد):
https://webgoo.ir/example/javascript/javascript-scroll-to-next.html
متاسفانه متدهای استانداردی که با تمام مرورگرها سازگار باشند در این خصوص به راحتی در دسترس نیست و باید زمان زیادی صرف سازگاری کد کرد، نمونه کد بالا تا حد امکان با مرورگرهای مختلف سازگار شده است.
ستاره
۱۰:۱۵ ۱۴۰۱/۰۴/۰۴
سلام وقت بخیر کدها رو دقیقا کجا قرار بدیم؟
ابتدا باید بررسی کنیم و ببینیم کدام عنصر HTML در صفحه باعث بروز اسکرول افقی شده است برای این کار در مرورگرهایی مانند فایرفاکس با فشردن دکمه F12 از قسمت کنسول اقدام به آزمایش و خطا و حذف یا تغییر ابعاد عناصر صفحه می کنیم تا جایی که اسکرول افقی محو شود، پس از پیدا کردن عنصر علت مشکل می توانیم در استایل CSS آن عنصر، ویرایش های دلخواه را انجام دهیم.
امیر
۱۷:۱۴ ۱۴۰۱/۱۲/۱۷
سلام و عرض ادب
من از قالب نگارشاپ استفاده میکنم یک مشکل دارم ، سایت در صفحه موبایل همه ساختارش درسته فقط مشکل اینه زمانی که کاربر به سایت لاگین میشه فقط صفحه تک محصول اسکرول افقی ظاهر میشه و در قسمت سمت چپ فضای زیادی هست که با زوم آوت صفحه کاملا مشخصه انگار تصویر و مطالب صفحه تک محصول کوچکتر از صفحه هستند در صفحات دیگر اصلا چنین مشکلی وجود نداره، جالب اینجاست فقط با لاگین به سایت این مشکل در صفحه تک محصول بوجود میاد
احتمالا محتوایی در صفحه وجود دارد که عرض کلی را از مقدار صد در صد افزایش می دهد، در هر صورت باید صفحه به دقت در قسمت کنسول مرورگر Inspect شود.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 3
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Reza
سلام استاد خسته نباشید من یه سوالی داشتم میخوام بدونم چطور باید در وبلاگ لوگو یا فایل png روی عکس گذاشت برای مثال یکی از...
۱۴۰۲/۰۱/۰۷

سامان
سلام امکان داره شما یک مثال بهتر بزنید نسبت به بنده که بجای بک گراند کل صفحه تغییر رنگ بده بصورت خودکار
۱۴۰۱/۱۲/۲۱

سامان
سلام من کلی در سطح وب گشتم اما نتونستم چیزی پیدا کنم درباره اینکه چطور ظاهر سایت در روز سفید بشه و در...
۱۴۰۱/۱۲/۲۰

امیر
سلام و عرض ادب من از قالب نگارشاپ استفاده میکنم یک مشکل دارم ، سایت در صفحه موبایل همه ساختارش درسته فقط مشکل اینه...
۱۴۰۱/۱۲/۱۷

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


روزبه پارسی
ببخشید یه سوال دیگه هم دارم البته شرمنده این صفحه رو نگاه کنید: یه جا برای شماره نوشته (نمایش کامل) که باید کلیک...
۱۴۰۱/۱۲/۱۳

روزبه پارسی
با تشکر از شما استاد عزیز خیلی خوب بود توی صفحه اگه چند تا پاراگراف داشته باشیم که بخواهیم این تغییر رنگ رو برای...
۱۴۰۱/۱۲/۱۳

مهدی
من یک سایت سر و کار دارم در هر 24 ساعت فقط یک بار برای 5 دقیقه باز میشود اما وقتیکه تمام مراحل را تمام...
۱۴۰۱/۱۲/۱۲

پــرتو
سلام خسته نباشید در مورد ابزار inspector یکم بیشتر توضیح می دین که چطوریه مثلا اگر بخوایم جای منوها رو از طریق این ابزار پیدا...
۱۴۰۱/۱۲/۱۲

روزبه پارسی
با سلام و خسته نباشید ببخشید من یه متن دارم که می خوام هر وقت صفحه رو لود می کنم متن رنگش بصورت راندوم...
۱۴۰۱/۱۲/۱۲

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

bahar
سلام و عرض ادب از بابت مطلب مفیدی که در سایت قرار دادید سپاسگزارم
۱۴۰۱/۱۲/۰۱

محمود
سلام لطفن کاری کنید که وقتی منو در پایین صفحه قرار می گیرد منوی آبشاری به طرف بالا باز شود . با تشکر...
۱۴۰۱/۱۱/۱۷

ali
سلام آیا راهی یا کدی وجود داره که بتونیم فایل های آپلود شده غیر مستقیم رو توی وبلاگ پخش کنیم؟
۱۴۰۱/۱۱/۱۷

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