دوشنبه ۰۷ خرداد ۱۴۰۳

Monday, May 27, 2024 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 مطالب بیشتر:
ساخت منوی کشویی با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
مخفی کردن عناصر وب با CSS
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
دیدگاه
more ۳۹ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
رضا
۱۸:۵۲ ۱۳۹۹/۰۹/۳۰
سلام
چند وقت پیش اسکرول سایت من کار می کرد اما الان اثری ازش نیست میشه دوباره نشان داده بشه؟
Baha9.ir
سایتتان بررسی شد، اسکرول عمودی بدون مشکل فعال است اسکرول افقی هم با توجه به نبود محتوایی خارج از عرض استاندارد قالب دیده نمی شود که خبر خوبی است!
مجید
۱۱:۴۵ ۱۴۰۰/۰۴/۰۷
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .
محمود
۰۹:۲۸ ۱۴۰۰/۰۴/۳۰
سلام مهندس
چگونه می شود میزان حرکت اسکرول را تعیین کرد. یعنی با یه حرکت غلطک موس صفحه بعدی در کادر قرار بگیرد. به عنوان مثال، اسلاید های موجود در سایت باید کلی غلطک موس را بچرخانی تا اسلاید پاینتر ظاهر شود. ولی اگر بشود با یه اشارۀ غلطک اسلاید پایینی وارد کادر بشه خوب خواهد شد.
با تشکر.
برای اسکرول یکباره به اسلاید بعدی باید از جاوا اسکریپت استفاده کنیم، در سورس نمونه صفحه زیر این کار برای 3 اسلاید انجام شده که با پیروی از الگو می توانیم تعداد بیشتری اسلاید در نظر بگیریم (کد در حداقل زمان ممکن نوشته شده و ممکن است نیاز به بهینه سازی بیشتری داشته باشد):
https://webgoo.ir/example/javascript/javascript-scroll-to-next.html
متاسفانه متدهای استانداردی که با تمام مرورگرها سازگار باشند در این خصوص به راحتی در دسترس نیست و باید زمان زیادی صرف سازگاری کد کرد، نمونه کد بالا تا حد امکان با مرورگرهای مختلف سازگار شده است.
ستاره
۱۰:۱۵ ۱۴۰۱/۰۴/۰۴
سلام وقت بخیر کدها رو دقیقا کجا قرار بدیم؟
ابتدا باید بررسی کنیم و ببینیم کدام عنصر HTML در صفحه باعث بروز اسکرول افقی شده است برای این کار در مرورگرهایی مانند فایرفاکس با فشردن دکمه F12 از قسمت کنسول اقدام به آزمایش و خطا و حذف یا تغییر ابعاد عناصر صفحه می کنیم تا جایی که اسکرول افقی محو شود، پس از پیدا کردن عنصر علت مشکل می توانیم در استایل CSS آن عنصر، ویرایش های دلخواه را انجام دهیم.
امیر
۱۷:۱۴ ۱۴۰۱/۱۲/۱۷
سلام و عرض ادب
من از قالب نگارشاپ استفاده میکنم یک مشکل دارم ، سایت در صفحه موبایل همه ساختارش درسته فقط مشکل اینه زمانی که کاربر به سایت لاگین میشه فقط صفحه تک محصول اسکرول افقی ظاهر میشه و در قسمت سمت چپ فضای زیادی هست که با زوم آوت صفحه کاملا مشخصه انگار تصویر و مطالب صفحه تک محصول کوچکتر از صفحه هستند در صفحات دیگر اصلا چنین مشکلی وجود نداره، جالب اینجاست فقط با لاگین به سایت این مشکل در صفحه تک محصول بوجود میاد
احتمالا محتوایی در صفحه وجود دارد که عرض کلی را از مقدار صد در صد افزایش می دهد، در هر صورت باید صفحه به دقت در قسمت کنسول مرورگر Inspect شود.
احمد
۰۹:۵۲ ۱۴۰۲/۰۲/۳۰
سلام، در کدوم قسمت باید کد رو قرار بدیم؟
در قسمت سفارشی سازی css قرار میدم، ارور میده و قبول نمیکنه.
ویرایش در وبلاگ است یا وبسایت؟ در وبلاگ ها مخصوصا بلاگفا محدودیت های بعضا بی موردی از طرف سرویس دهنده وجود دارد و باید قسمت های مختلف از جمله درج مستقیم در کدهای اصلی قالب را بررسی کنید ببینید در کدام قسمت جواب می گیرید، توصیه می کنیم قبل از هرگونه اعمال تغییر از کدهای فعلی پشتیبان داشته باشید.
fatima
۰۳:۴۳ ۱۴۰۲/۰۵/۲۸
سلام. خسته نباشید. ما با responsive هم میتوانیم اسکرول افقی را حذف کنیم؟
عبارت responsive در وب به معنی سبک طراحی قالب های واکنش گرا یا انعطاف پذیر است، یعنی قالبی که ابعادش با اندازه صفحه نمایش دستگاه های مختلف سازگار می شود، اما اسکرول افقی یک مشکل است که می تواند در قالب های واکنش گرا هم دیده شود و باید دلایل اصلی آن که در آموزش اشاره شده پیدا و رفع شود، اما در کل مشکل اسکرول افقی در این سبک طراحی قالب کمتر دیده می شود.
محبوبه قاسم پور
۱۰:۲۵ ۱۴۰۲/۰۶/۱۸
سلام
وقتتون بخیر
برای منوهای کشویی سایت، اگر خاصیت overflow:hidden باشد، زیرمنوها نمایش داده نمی شود، از طرفی اگر این خاصیت فعال نباشد سایت بهم ریخته می شود.
میشه لطف کنید راهنمایی بفرمایید برای نمایش زیرمنوها چه باید کرد؟
خاصیت های CSS اعمال شده بر روی تگ های منو در تعامل با دیگر تگ های HTML صفحه عمل می کنند، با شرح مشکلی که عنوان کرده اید یعنی منو حداقل در قسمتی سازگاری لازم را با دیگر عناصر صفحه ندارد یا اینکه مشکل (ساده یا پیچیده ای) در چینش تگ ها وجود دارد، رفع این نوع موارد به تست و خطایابی سورس کدها نیاز دارد که در صورت تمایل می توانید منو را در یک صفحه وب آزمایشی قرار داده و آدرس URL آن را درج کنید (یا فایل را به آدرس ایمیل ما ارسال کنید) تا بررسی شود.
امیر علی برغمدی
۱۹:۴۳ ۱۴۰۲/۰۷/۱۶
آقا متچکرم ممنونم
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پرتو
سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...
۱۴۰۳/۰۳/۰۱

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

سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱

سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹

سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹

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

پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶

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

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

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

هادی عبداله زاده
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...
۱۴۰۳/۰۱/۲۲

هادی عبداله زاده
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟
۱۴۰۳/۰۱/۲۲

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

پـــرتو
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...
۱۴۰۳/۰۱/۱۹

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

شریفی
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...
۱۴۰۳/۰۱/۱۵

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