آموزش وردپرس
خانه - سورس - ASP - آموزش حذف اسکرول افقی (horizontal scroll) با css
browsers-css

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

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

 

browsers-css

 

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

حتما بخوانید  فریم ورک cakephp چیست ؟

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

[ برای مشاهده لینک دانلود وارد شوید یا ثبت نام کنید ]

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

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

[ برای مشاهده لینک دانلود وارد شوید یا ثبت نام کنید ]

 

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

[ برای مشاهده لینک دانلود وارد شوید یا ثبت نام کنید ]

 

قیمت پروژه : رایگان

جهت کسب اطلاعات بیشتر از طریق بخش تماس با ما اقدام نمائید.

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

همچنین می تواند جهت دریافت اطلاعات حساب ، از طریق بخش شماره حساب اقدام نمائید.

منبع : رضا سورس

درباره ی مدیر سامانه

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

همچنین ببینید

php-course

دوره آموزشی ۱۰ روزه پروژه محور PHP

دوره استثنایی و جدید پروژه محور آموزش PHP سامانه رضا سورس ، از ابتدای خرداد …

۴ دیدگاه

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *