شنبه ۰۸ مهر ۱۴۰۲

Saturday, September 30, 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 مطالب بیشتر:
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
مخفی کردن عناصر وب با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
چسبیدن فوتر قالب به پائین صفحه با 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
6 × 4
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
javascript
سلام 🙌 توی جاوا اسکریپت چطور تگ آپشن رو پیش فرض بزاریم مثلا : تگ آپشن _استان محل صدور : همدان -...
۱۴۰۲/۰۷/۰۶

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

مجتهدزاده
سلام من در لاراول سعی دارم تا با یک لینک رو اجرا کنم تا یک اس ام اس به شماره ای که در...
۱۴۰۲/۰۷/۰۳

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

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

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

سعید
نمای ظاهری من مثل قبل که در اوت لوک میفرستادم در نیو ایمیل نیست یعنی تغییر کرده چطور میتونم برگردم به همون حالت اول خودش...
۱۴۰۲/۰۶/۲۷

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

امین رحیمی
عالی بود ممنون
۱۴۰۲/۰۶/۲۴

کوروش
سلام خسته نباشید توضیح : سایتی که تگ های select option ها و همه div ها و label ها ( کلاس های...
۱۴۰۲/۰۶/۲۴

عدم اجرای فونت فیس در تب منو
سلام برای تب منو فونت فیس برای تب اول کار میکند اما تب های بعدی اعمال نمیشود چکار باید کرد
۱۴۰۲/۰۶/۲۲

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

mehdi
سلام من امتحان کردم نشد
۱۴۰۲/۰۶/۱۵

پـــرتو
سلام فکنم در یادداشت ها ارسال شده بود و تاریخشم یادم نیست ولی من واقعا نمی دونم کامنتش کجاست که برم برش دارم ...
۱۴۰۲/۰۶/۱۴

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

امیرحسین رستمی
سلام مجدد وقت بخیر لطفا لینک زیر را ببینید میخوام تمام متن های فارسی که اینجا انتخاب کردم رو با عبارت با قائده انتخاب...
۱۴۰۲/۰۶/۱۱

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

امیرحسین رستمی
در رابطه با دوتا سوال قبلی من این کد رو نوشتم شما بررسی کنید ببینید اگه مشکل دیگه ای نداره ، درست داره کار میکنه...
۱۴۰۲/۰۶/۰۹

امیرحسین رستمی
سلام وقت بخیر من یک عبارات با قائده ای میخوام که این متن رو : من همچین عبارتی در نظرم هست ولی ...
۱۴۰۲/۰۶/۰۹

hossein
سلام مجدد، ممنون از پاسخگویی شما از وردپرس استفاده میکنم و قالب وودمارت، هدر هم با هدر ساز قالب ساخته شده با اینکه...
۱۴۰۲/۰۶/۰۹

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

hossein
سلام وقت شما بخیر باشه ابتدا جا داره از شما تشکر کنم میخوام یک آیکن لینک دار توی هدر سایتم را از دید...
۱۴۰۲/۰۶/۰۹

علی
سلام و با تشکر از راهنمایی شما بنده یک وب سرویس ارسال پیامک دارم که از طریق آن برای کابرانم پیامک ارسال می کنم....
۱۴۰۲/۰۶/۰۷

مهدی
سلا چطوری میتونم کدام تو مرورگر دقیق نمایش بدم حتی >< تگ هام نمایش داده بشه در html تگ کد را هم معرف نکنید چون...
۱۴۰۲/۰۶/۰۴

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

محمدرضا
سلام وقت شما بخیر لطف بفرمائید با switch و default کدی رو بنویسید که: اگه متغیر a یک باشد متغیر b دو...
۱۴۰۲/۰۶/۰۱

پـــرتو
سلام بابت جواب به سوالم در مورد بلاگفا ممنون من خودم با پشتیبانی بلاگفا تماس گرفتم گفنن نمیشه اینکار ولی یه سوال دیگه ازتون داشتم...
۱۴۰۲/۰۵/۲۸

fatima
سلام. خسته نباشید. ما با responsive هم میتوانیم اسکرول افقی را حذف کنیم؟
۱۴۰۲/۰۵/۲۸

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

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