آموزش حذف اسکرول افقی (horizontal scroll) با css

آموزشی
مرداد ۱۶, ۱۳۹۲
بازدید : 4244 بازدید

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

 

browsers-css

 

چرا اسکرول افقی در صفحه یا بلاک div ایجاد می شود؟
علت عمده این مشکل به تعریف نادرست یا ناهماهنگ عرض اِلمان های صفحه یا بلاک div مربوط می شود، مثلا اگر بلاکی با پهنای ۲۰۰ پیکسل را در بلاکی دیگر با عرض ۱۹۰ پیکسل قرار دهید (به صورت تودرتو (nested) یا آشیانه ای)، مسلما در حالت عادی با مشکل اسکرول افقی و نواری آبی رنگ در زیر آن مواجه خواهید شد، یا اگر در اسکلت بندی قالب سایت یا وبلاگ خود، عرض زیادی برای چارچوب کار در نظر بگیرید که این عرض از اندازه صفحه نمایش کاربران بیشتر باشد، مرورگر به صورت خودکار اسکرول افقی را نشان خواهد داد.
چرا باید اسکرول افقی را حذف کنیم؟
باید توجه داشت که اسکرول افقی به خودی خود مشکل خاصی برای محتوای شما ایجاد نمی کند، اصلی ترین دلیل برای حذف آن، حرفه ای تر به نظر رسیدن کار و ایجاد جلوه های بصری بهتر است، همچنین عدم آن در مقایسه با وجود اسکرول افقی، تجربه بهتری از وبگردی را به بازدیدکنندگان ارائه می کند؛ چرا که کاربر ناچار است برای دیدن تمام محتوا، از چپ به راست یا از راست به چپ نوار اسکرول بار را حرکت دهد.
راه حل از بین بردن اسکرول افقی با css
همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد، می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد، به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.

 

اما این ویژگی بیشتر در اسکرول عمودی کاربرد دارد و برای اسکرول افقی باید آن را به صورت زیر تغییر داد.

این کد را می توانید در یک کلاس تعریف کنید و آن کلاس را به بلاک یا تگ body (برای از بین بردن اسکرول در کل صفحه) نسبت دهید.

مشکل ناسازگاری overflow-x در برخی از مرورگرهای قدیمی
در برخی از نسخه های مرورگر فایرفاکس ممکن است خاصیت overflow-x به درستی عمل نکند، هرچند بیشتر کاربران از ورژن های به روزتر استفاده می کنند، اما جهت اطلاعات بیشتر، برای این نوع مرورگرها کد بالا را با افزودن مقادیر moz-scrollbars-vertical کامل می کنیم.

 

حذف اسکرول بار برای textarea
در فرم های html برای عنصر textarea نیز روشی که در بالا توضیح دادیم کاربرد دارد، اما با خاصیت های html نیز می توان اسکرول افقی textarea را در فرمها از بین برد، برای این منظور از wrap و مقدار virtual استفاده کنید.

 

Like
امتیاز :
بدون رای!
مدیر سامانه
مدیر سامانه Mr.Code هستم . به صورت تخصصی در زمینه برنامه نویسی سازمانی و طراحی وبسایت و پرتال و طراحی اپلیکیشن اندروید فعالیت دارم .
همراه ما باشید در اینستاگرام رضا سورس صفحه اینستاگرام
دیدگاهتان را بنویسید

19 − دوازده =

نگار جمعه , ۱۴ شهریور ۱۳۹۳ پاسخ

خوب بود. ممنون

مدیر سامانه
مدیر سامانه شنبه , ۱۵ شهریور ۱۳۹۳ پاسخ

سلام
سپاسگزاریم دوست عزیز
مانا باشید

ayyub سه شنبه , ۶ مهر ۱۳۹۵ پاسخ

سلام
با کد overflow-x اسکرول افقی را حذف کردم ولی وقتی که صفحه را کوچیک می کنم بازم اسکرول افقی وجود نداره این مشکل را چطور حل کنم موقع کوچک کردن صفحه که باید اسکرول داشته باشیم
با تشکر

مدیر سامانه
مدیر سامانه سه شنبه , ۶ مهر ۱۳۹۵ پاسخ

سلام دوست عزیز
شما می توانید از دستور overflow:scroll استفاده نمایید.اگر قالب شما ریسپانسیو نباشد طبیعتا اسکرول شدن حتوا طبیعی است.

عضویت در خبرنامه رضا سورس

تمامی اطلاعات محفوظ است!