article

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

css-horizontal-scroll

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

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


علت عمده بروز مشکل نمایش اسکرول بار افقی در صفحات وب به تعریف نادرست یا ناهماهنگ عرض عناصر HTML صفحه و استایل دهی آنها در CSS مربوط می شود، به طور مثال اگر بلاکی با عرض 200 پیکسل را در بلاکی دیگر با عرض 190 پیکسل قرار دهیم مسلما در حالت عادی با مشکل نمایش اسکرول بار افقی مواجه خواهیم شد، یا به فرض اگر در ساختار و اسکلت بندی قالب سایت یا وبلاگمان عرض زیادی برای چارچوب کار در نظر بگیریم که این عرض از اندازه صفحه نمایش کاربران بیشتر باشد، مرورگر به صورت خودکار اسکرول افقی را نمایش خواهد داد، مثال دیگر در این خصوص اشتباه در مقداردهی درصدی در حین طراحی قالب های واکنشگرا یا نسخه های مخصوص موبایل است، به فرض اگر بلاک والد 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>
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
» ساخت بلاک شناور عمودی با CSS
» ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
» ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
» مخفی کردن عناصر وب با CSS
commentنظرات (۳۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: شادی
۲۱:۳۱ ۱۳۹۳/۰۹/۱۱
خیلی خیلی ممنونم واقعا خیلی نیاز داشتم به این که چطور اسکرول افقی رو از بین ببرم که با مطلب شما مشکلم حل شد
نویسنده: شادی
۲۰:۴۱ ۱۳۹۳/۰۹/۱۵
سلام خیلی ممنون با قرار دادن این کد در تگ مربوطه اسکرول افقی برداشته شد اما هنوز وقتی با کلید جهتی چپ حرکت میکنم میشه قسمتهای سفید رو دید
چکار کنم کلا با کلیدهای جهتی هم حرکت نکنه واقعا گیر کردم :(
پاسخ: 
نیاز به بررسی صفحه مورد نظر است!
نویسنده: قاسمی
۰۹:۲۸ ۱۳۹۳/۱۱/۱۸
ممنونم ، خیلی خوب و کاربردی توضیح دادین. از اینکه اطلاعاتتون رو در اختیار دیگران قرار می دید بسیار سپاسگذارم
نویسنده: soheil
۱۱:۵۱ ۱۳۹۴/۰۲/۰۶
سلام
من میخوام وقتی که کاربر روی یه آیکن، کلیکش رو نگه میداره، tooltip بصورت خودکار داخل صفحه باشه. ولی همه tooltip ها به سمت چپ باز میشن بطوریکه برای آیکن سمت چپ، باعث میشه که صفحه، اسکرول افقی پیدا کنه.
این عکس رو ببینید:
http://www.axgig.com/images/51252987794889896222.jpg
چیکار کنم این مشکل بوجود نیاد؟
ممنون
پاسخ: 
بدون بررسی و تست سورس کدها خیلی نمی توان دقیق راهنمایی کرد، ممکن است با استفاده از ویژگی position با مقدار relative یا absolute مشکل رفع شود (باید کدنویسی HTML به این لحاظ درست انجام شده باشد)، یا نیاز به مقداردهی درصدی باشد، همچنین ممکن است با افزودن overflow-y با مقدار hidden برای تگ body مشکل رفع شود.
نویسنده: شهرام
۰۸:۳۴ ۱۳۹۴/۰۸/۰۵
با سلام و عرض ادب.
من برا پروژه دانشجوییم دارم سایت طراحی میکنم. تازه کارم. هرچی صفحه رو کوچیکتر میکنم کلا همه مطالب به هم میخوره. میخام با کوچیکتر کردن مرورگر مطالبم همونجور بمونه و اسکرول افقی بوجود بیاد.
ممنون میشم راهنماییم کنید.
پاسخ: 
پاسخ کوتاهی برای این مشکل وجود ندارد! باید طراحی قالب وب را از پایه و مقدمات فرا گرفته باشید، صرفا جهت راهنمایی، باید از مقداردهی ثابت و پیکسلی در طراحی قالب استفاده کنید تا با تغییر اندازه پنجره مرورگر، تغییری در قالب نداشته باشید!
نویسنده: امیر
۰۲:۳۷ ۱۳۹۴/۱۰/۱۶
اسکرول در نسخه موبایل رو چحوری میتونم رفع کنم
متشکر
پاسخ: 
برای رفع اساسی این مشکل یا باید نسخه موبایل برای سایتتان داشته باشید یا اینکه طراحی قالب واکنش گرا (Responsive) را فرابگیرید.
نویسنده: محسن
۱۴:۴۰ ۱۳۹۴/۱۲/۲۹
سلام استاد
میشه ما خواص overflow رو به جای کلاس مستقیما تو تگ body تنظیم کنیم؟
پاسخ: 
سوالتان واضح نیست!، در کل استایل CSS را می توانید به صورت خطی نیز تعریف کنید، مثال:
<body style="font-size:12px;">
نویسنده: حمزه
۰۱:۰۹ ۱۳۹۵/۰۶/۰۳
سلام
وقت بخیر
خیلی عالی بود دمتون گرم
نویسنده: ayyub
۱۲:۴۴ ۱۳۹۵/۰۷/۰۶
سلام
با کد overflow-x اسکرول افقی را حذف کردم ولی وقتی که صفحه را کوچیک می کنم بازم اسکرول افقی وجود نداره این مشکل را چطور حل کنم موقع کوچک کردن صفحه که باید اسکرول داشته باشیم
با تشکر
پاسخ: 
حذف اسکرول افقی با این روش برای مواردی غیر از صفحه اصلی شما است، در واقع طراحی شما باید به نحوی باشد که صفحه اصلی اسکرول افقی نداشته باشد، در غیر این صورت یکجای قالب وب شما دچار اشکال است که باید رفع شود (نه با این روش)، این شیوه مناسب زمانی است که از صفحاتی درون صفحه اصلی وب خود استفاده می کنید، به طور مثال یک textarea یا یک بلاک div دارای امکان اسکرول.
نویسنده: ویانا
۰۲:۰۷ ۱۳۹۵/۰۷/۰۹
سلام خسته نباشید . برای من کار نکرد میشه راهنمایی کنید ؟
پاسخ: 
لطفا آدرس صفحه را جهت بررسی درج نمائید!
نویسنده: barsin
۰۳:۰۸ ۱۳۹۵/۰۷/۲۴
ممنوم عالی بود
نویسنده: صادق
۱۶:۰۱ ۱۳۹۶/۰۸/۲۶
سلام ، مشکل اسکرول بی نهایت افقی دارم در صفحات داخلی که با افزونه ای بالا می ایند یعنی در واقع خود پوسته سایت این مشکل را ندارد بلکه افزونه این مشکل را دارد ، این کدها را در کدام قسمت افزونه بگذارم ؟ ، برای دیدن مشکل به این صفحه بروید :
http://turkishtour.jazabeha.ir/itinerary/%d8%aa%d9%88%d8%b1-%d8%a8%d8%af%d8%b1%d9%88%d9%85/
کد را در کدام فایل افزونه تور بگذارم با تشکر
پاسخ: 
برای خطایابی ابتدا باید افزونه ها را مورد به مورد به صورت آزمایش و خطا غیرفعال کرده و سایت را بررسی کنید، پس از پیدا کردن افزونه دارای اشکال، فایل CSS آن را ویرایش و مواردی که می توانند به اسکرول افقی مرتبط باشند را اصلاح نمائید.
نویسنده: ابراهیم قاسمی
۱۵:۳۵ ۱۳۹۷/۱۰/۲۱
سلام چطور میشه عمل سوایپ یا اسکرول عمودی رو روی یک بلاک غیر فعال کرد؟ مثلاً یه بلاک گالری رو فقط بشه افقی اسکرول کرد و با حرکت عمودی کل پیج جابجا نشه، آیا با css میشه این کار رو انجام داد؟
پاسخ: 
اگر آدرس یک نمونه صفحه را درج می کردید امکان راهنمایی بهتر میسر می شد، به هر صورت با توجه به توضیحات با CSS می توانید نوار اسکرول عمودی را غیرفعال کنید:
overflow-y: hidden;
همچنین برای تثبیت جایگاه عنصر در CSS از خاصیت display با مقادیر fixed می توانید استفاده کنید:
position: fixed;
نویسنده: نقدی زاده
۱۴:۴۴ ۱۳۹۸/۱۱/۰۴
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
نویسنده: masoud
۰۴:۲۵ ۱۳۹۹/۰۱/۲۰
بسیار سپاسگزارم
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





4 × 8
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.