آگهی
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
» ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
» ساخت بلاک شناور عمودی با CSS
» ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با 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 دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




9 × 1
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حامد
در:
عالی بود
۲۱:۳۸:۳۱ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام خیلی ممنون بابت پاسخ سریعتون خیلی دنبال همین دو خط کد بودم برای یادگیری سریع ریجکس ولی با سرچ پیدا نکردم و...
۱۸:۰۳:۴۳ ۱۳۹۸/۱۱/۰۷

form فرید
در:
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
۱۲:۱۹:۰۷ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام میشه لطفا به سوالم جواب بدید من می خوام با استفاده از عبارات با قاعده تمام تگ های html رو تشخیص بدم...
۱۰:۱۳:۰۵ ۱۳۹۸/۱۱/۰۷

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

form رسول
در:
سلام میخوام بجای نمایش متن، متن موجود در یه لینکو بهم نشون بده ممنون میشم کمکم کنید
۱۳:۳۸:۱۸ ۱۳۹۸/۱۱/۰۶

form حسن
در:
من مطابق کد نوشته شده شما میخواستم آدرس
۱۴:۱۰:۱۳ ۱۳۹۸/۱۱/۰۵

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

form نصراله رضایی
در:
سلام در ادمین های گذشته که باز می کنم تصاویر مشاهده نمی شود و من را به آدرس Huge domains.com ارجاع می...
۲۲:۳۹:۵۳ ۱۳۹۸/۱۱/۰۴

form نقدی زاده
در:
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
۱۴:۴۴:۱۳ ۱۳۹۸/۱۱/۰۴

form وحید پوربشیری
در:
سلام لطفا یکی که خوب جاوا اسکریپت بلده بیاد به این آیدی ت.ل.گ.ر.ا.م Alpha2020@ یه کد برام بنویسه پول هم میدم
۱۱:۱۲:۳۲ ۱۳۹۸/۱۱/۰۲

form امین
در:
سلام تشکر بابت راهنماییتون. منظور من این بود که: الان با ثبت نام کاربر a در سایت اطلاعاتش در دیتابیس ثبت میشه و یک پوشه...
۰۳:۱۲:۴۰ ۱۳۹۸/۱۱/۰۲

form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

form امین
در:
سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...
۱۴:۱۸:۵۱ ۱۳۹۸/۱۰/۳۰

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی