Search - SP Page Builder
Easy Profile - Search plugin
جستجو -مجموعه ها
جستجو - تماس ها
جستجو - محتوا
جستجو - خبرخوان ها
جستجو - وب لینک ها
جستجو - برچسب ها
برنامه نویسی

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

امتیاز کاربران

ستاره فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال
 

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

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

چرا اسکرول افقی در صفحه یا بلاک div ایجاد می شود؟


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

چرا باید اسکرول افقی را حذف کنیم؟


باید توجه داشت که اسکرول افقی به خودی خود مشکل خاصی برای محتوای شما ایجاد نمی کند، اصلی ترین دلیل برای حذف آن، حرفه ای تر به نظر رسیدن کار و ایجاد جلوه های بصری بهتر است، همچنین عدم آن در مقایسه با وجود اسکرول افقی، تجربه بهتری از وبگردی را به بازدیدکنندگان ارائه می کند؛ چرا که کاربر ناچار است برای دیدن تمام محتوا، از چپ به راست یا از راست به چپ نوار اسکرول بار را حرکت دهد.

راه حل از بین بردن اسکرول افقی با css


همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد، می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد، به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.

<style type="text/css">
.class{
overflow:hidden; /*overflow:auto; overflow:scroll; overflow:visible;*/
}
</style>

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

<style type="text/css">
.class{
overflow-x: hidden; /*حذف اسکرول افقی*/
overflow-y: auto; /*اسکرول عمودی*/
}
</style>

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

مشکل ناسازگاری overflow-x در برخی از مرورگرهای قدیمی


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

<style type="text/css">
.class{
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
</style>

حذف اسکرول بار برای textarea


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

<textarea wrap="virtual" cols="20" rows="10"></textarea>

نظرات (0)

نظر ارسال شده‌ی جدیدی وجود ندارد

دیدگاه خود را بیان کنید

ارسال دیدگاه بعنوان یک مهمان - ثبت نام کنید و یا وارد حساب خود شوید.
پیوست ها (0 / 3)
اشتراک‌گذاری موقعیت مکانی شما

خبرنامه سلام دیجی

در خبرنامه ایمیلی ما عضو شوید

به جمع همراهان ما بپیوندید و همواره بروز باشید

اطلاعات تماس

در صورت بروزمشکل می توانیدبه ایمیل زیرپیام ارسال کنیدinfo@hellodigi.ir

ساماندهی

logo-samandehi

درباره سلام دیجی

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

تمام حقوق سایت برای سلام دیجی و نويسندگان آن محفوظ می باشد