یکشنبه ۰۳ مرداد ۱۴۰۰

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





1 × 9
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form آی تی
در:
ممنون آینده کاری پی اچ پی خوبه یا جاواسکریپت؟
۱۴۰۰/۰۴/۳۰

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

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

form محمد
در:
سلام خیلی خیلی ممنون تشکر
۱۴۰۰/۰۴/۲۷

form محمود
در:
سلام چگونه حاشیه های ناتمام ایجاد کنیم. یعنی تمام دور کادر کامل نباشد و بردر دور کادر ناقص باشد. مثلن بردر سمت راست تا...
۱۴۰۰/۰۴/۲۷

form محمد
در:
سلام ببخشید من با curl میخواستم فایلی رو با api بفرستم ولی جواب نداد اگر امکانش هست تصحیحش کنید:
۱۴۰۰/۰۴/۲۷

form برنامه نویس
در:
سلام و عرض ادب خدمت استاد. یه سوال خدمت شما داشتم. چطور می تونیم از ادیتور مثل ckeditor یا tinymsc به جای textarea...
۱۴۰۰/۰۴/۲۷

form جواد
در:
با سلام من دانشی از برنامه نویسی ندارم ، میشه برنامه ای نوشت که آدرس یک صفحه بعد از لاگین شدن بهش داد و هر...
۱۴۰۰/۰۴/۲۱

form علی
در:
سلام خوبین؟ من میخوام برای وبلاگم سبد خرید بزنم ولی php و ........ بلد نیستم اگه برام درست کنین ممنونتون میشم
۱۴۰۰/۰۴/۱۹

form سینا الف
در:
باسلام! من از این آموزش‌ سایت‌تون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره...
۱۴۰۰/۰۴/۱۸

form محمود
در:
سلام و تشکر از کمک های قبلی تان. در بخش بالا قسمت «تغییر رنگ پس زمینه با کلیک کاربرم» را خوندم . ولی کد...
۱۴۰۰/۰۴/۱۸

form محمود
در:
با سلام دوباره نمونه کدی که برای افکت پس زمینه چراغ پلیس و صدا قرار دادین خیلی خوب کار میکند و بسیار سپاس ....
۱۴۰۰/۰۴/۱۴

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

form محمود
در:
سلام و عرض ادب چگونه می شود با کلیک روی یک متن ، کل پس زمینه در یک آن چشمک بزند یعنی رنگ...
۱۴۰۰/۰۴/۱۱

form مجید
در:
سلام. من برنامه ای دارم که بر اساس php و mysql کار میکنه. بهش 100 جمله میدم و جملات رو تصادفی نمایش میده. حالا میخام...
۱۴۰۰/۰۴/۱۰

form Amir
در:
خیلی عالی بود
۱۴۰۰/۰۴/۱۰

form Amir
در:
سلام ببخشید یک کانال تلگرامی است که سیگنال میده و شرطی اینکه در آلپاری و لایت فارسی حساب داشته باشی و تحت ای پی آنها...
۱۴۰۰/۰۴/۱۰

form مجید
در:
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .
۱۴۰۰/۰۴/۰۷

form جین مین
در:
با سلام و وقت بخیر من تمام مراحل رو به نظر خودم درست انجام دادم و فایل هم دانلود میشه اما مشکل اصلی اونجاست...
۱۴۰۰/۰۴/۰۶
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.