parsgreen.com
article

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

css-horizontal-scroll

گاهی مواقع در طراحی صفحات وب موقعیت هایی پیش می آید که باعث سردرگمی و به زحمت افتادن طراح می شود، مثلا فرض کنید قالبی را برای وبلاگ یا سایتی کدنویسی کرده اید و انتظار دارید مطابق سلیقه شما محتوا را نشان دهد، اما ناغافل متوجه می شوید که یک جای کار اشکال دارد و اسکرولی افقی در پائین مرورگر دیده می شود، اگر این اتفاق برای شما هم رخ داده است، جای نگرانی نیست، در این یادداشت به بررسی علت به وجود آمدن این مشکل و راه حل برطرف کردن آن به کمک 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>
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css
» آموزش استفاده از فونت فارسی در وب با CSS
» مخفی کردن عناصر وب با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» ساخت منوی آبشاری (عمودی) با تگ ul li و css
commentنظرات (۲۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: حمید
زمان: ۱۳:۰۱:۴۷ - تاریخ: ۱۳۹۱/۰۶/۲۰
ممنون از شما عالی بود. برای من کار کرد
نویسنده: علیرضا جمالی
زمان: ۲۳:۱۳:۱۷ - تاریخ: ۱۳۹۱/۰۶/۲۶
سلام.ممنون واقعا به کارم اومد .
نویسنده: مسعود زاهدي
زمان: ۱۷:۵۴:۲۹ - تاریخ: ۱۳۹۱/۰۸/۱۲
سلام ممنون مفيد بود فقط يه سوال
وقتي اسكرول عمودي هايدن ميشه ديگه صفحه به هيچ وجه بالا و پايين نميشه
راهي هست كه بشه اونم حل كرد ؟
پاسخ: 
سلام
راه حل ساده ای وجود ندارد، شاید یک تکنیک این باشد که بلاکی که می خواهید اسکرول داشته باشد را با عرض بیشتر، درون بلاکی دیگر با عرض کم تر و با اسکرول بار مخفی قرار دهید، به این ترتیب اسکرول بلاک درونی در زیر بلاک بدون اسکرول مخفی می شود در حالی که محتوای درون آن قابل اسکرول است (تست نشده).
نویسنده: حسن
زمان: ۰۰:۵۷:۳۵ - تاریخ: ۱۳۹۱/۰۹/۲۵
خیلی ممنون عالی بود
نویسنده: باران
زمان: ۱۲:۳۵:۰۵ - تاریخ: ۱۳۹۱/۱۲/۱۴
ممنون خیلی عالی بود
نویسنده: امینی
زمان: ۱۰:۵۹:۴۷ - تاریخ: ۱۳۹۲/۰۱/۱۹
سلام
تشکر و سپاس فراوان بابت سایت خوب و اطلاعات مفید
نویسنده: rahaamirchermahini
زمان: ۲۲:۱۴:۱۷ - تاریخ: ۱۳۹۲/۰۲/۲۸
با سلام و تقدیر و تشکر از بابت راهنمایی های شما
یه سوال دیگه هم داشتم البته شما این مطلب رو هم در موردش نوشتید وقتی سرچ زدم اما جوابم در این مطلب نبود
چطور میشه اجزائ رو در css نوشت که هر چقدر عرض مرورگر رو روی دسکتاپ کم کنیم اجزائ رو به طرف پایین بده و یه استایل تازه بگیره و به اسکرول افقی نیاز پیدا نکنه
تقریبا تمام وب هایی که میبینیم این مشکل رو دارن که با کم کردن عرض با اسکرول افقی باید در عرض جابجا شد
برای مثال این سایت رو پیدا کردم که معرف حضور میکنم
www.mywindows.ir
با تشکر
شاد موفق و پیروز باشید
پاسخ: 
سلام
مبحثی که مورد نظر شما است با عنوان قالب های Responsive شناخته می شوند، یک شیوه طراحی که در آن سعی می شود تا حد امکان قالب با دستگاههای موبایل، تبلت و... سازگار شود تا نیازی به استفاده از نسخه موبایل نباشد، البته این شیوه تا به امروز چندان مورد پسند طراحان وب نبوده و به همین دلیل اکثر سایت هایی که می بینیم از آن استفاده نمی کنند، دلایل این عدم اقبال هم به چند مورد مربوط می شود:
- این شیوه زمان و وقت خیلی زیادی در مقایسه با شیوه های متداول می برد و نیاز به آزمایش و خطای فراوان است تا یک قالب را کاملا با تمام مرورگرها منطبق کرد.
- این شیوه مبتنی بر CSS3 و قابلیت media screen و... است که همین امر کافی است تا پیکار با بسیاری از مرورگر ها و از جمله مرورگر IE در زمینه ای نو شروع شود!
- طراحی در این شیوه در کنار محاسن، محدودیت هایی دارد که تنها در زمان طراحی خود را نشان می دهند.
به هر صورت اگر به وبسایت مورد اشاره نیز از دید بررسی فنی نگاه کنید، در صفحه نمایش با اندازه پیکسلی 1024 بخشی از قالب محو می شود! در مرورگر 8 IE و پائین تر اسکرول افقی دارد و...
نویسنده: rahaamirchermahini
زمان: ۱۹:۰۹:۵۸ - تاریخ: ۱۳۹۲/۰۲/۲۹
با سلام و عرض ادب
واقعا ممنونم از راهنمایی و جواب کامل شما عزیز
لطف کردید
اما اینکه این قالب در وردپرس گنجانده شده آیا این امکان هست که از یک پوسته آماده وردپرسی استفاده شده باشد یا اینکه نه این هم یه طراحی کامل با html5 و css3 بوده و بعدا در قالب وردپرس گنجانده شده است؟
در مورد اینکه در IE 8 و کمتر از ان و اصلا بطور کلی این سایت رو در ویندوز xp من نتونستم باز کنم وقتی از مدیر سایت هم سوال کردم میگه html5 و css3 رو در ویندوز xp به پایین بطور کامل پشتیبانی نمیشه و در این مورد حق با شماست اما روی ویندوز 8 واقعا نمایی بسیار زیبا داره و امیدوارم در اینده ای نزدیک چنین اموزشهایی رو در وبگو ببینیم چون سایت وبگو هم در نوع خودش بی نظیره
با تشکر وآرزوی توفیق
پاسخ: 
سلام
خواهش می کنیم، در مورد سایت مذکور، پشتیبانی از CSS3 و HTML5 ارتباطی به نسخه سیستم عامل ندارد، بلکه به نسخه مرورگر مربوط می شود، البته چون مرورگر های جدید مایکروسافت تنها در ویندوز های نسل جدید پشتیبانی می شوند، لذا در مورد IE این گفته درست است، اما به طور مثال در XP هم می توان با استفاده از آخرین نسخه فایرفاکس قابلیت های CSS3 را اجرا کرد.
در مورد قالب باید عرض کنیم فرآیند طراحی قالب ها چه آماده و چه طراحی شده مشابه هم است، یعنی قالب های آماده نیز باید با اصول CSS و HTML طراحی و سپس بر اساس ساختار اختصاصی CMS ها، تبدیل شوند.
در رابطه با آموزش ها، تلاش ما بر این است که ابتدا مباحث مقدماتی و آموزش های سطح پائین تر منتشر شوند تا سپس به موارد پیش رفته تر برسیم.
نویسنده: rahaamirchermahini
زمان: ۱۹:۳۶:۴۵ - تاریخ: ۱۳۹۲/۰۲/۲۹
باز هم سلام
واقعا ممنونم که اسم اینگونه قالب ها رو در جواب نوشتید با سرچی که زدم در مورد رسپانسیو چندتایی منبع پیدا کردم
باز هم ممنونم و متشکر
البته امیدوارم بزودی در سایت وبگو هم چنین آموزشهایی رو ببینم چون وبگو اموزشهایی داره که تمام و کمال و فوت و فن کار رو در اون بشکل کامل اموزش داده و برای مبتدیانی چون من بهترین منبع بوده و هست
باز هم برای شما آرزوی بهترینها رو دارم
موفق و پاینده باشید
نویسنده: tati
زمان: ۱۳:۱۰:۲۳ - تاریخ: ۱۳۹۲/۰۴/۱۶
سلام عالی بود دستتون درد نکنه ممنون
نویسنده: نیما
زمان: ۰۱:۵۳:۰۶ - تاریخ: ۱۳۹۲/۰۸/۰۹
سلام ، واقعا مطلب مفیدی بود
نویسنده: شقایق
زمان: ۰۸:۱۵:۱۴ - تاریخ: ۱۳۹۲/۰۸/۱۰
نمی دونی چقدر فکر کردم ، آخرهم به نتیجه نرسیدم.
واقعاااا ممنون .
خدا پدر و مادرتو برات نگه داره
نویسنده: مرتضی
زمان: ۲۱:۵۸:۵۶ - تاریخ: ۱۳۹۳/۰۳/۰۹
سلام
برای اینکه موقعیت اسکرولبار عمودی رو تغییر بدم باید چکار کنم؟ پیشفرض سمت چپ قرار می گیره اما میخوام سمت راست باشه
پاسخ: 
سلام
برای این منظور باید با CSS آشنا بوده و خاصیت direction را برای تگ body به صورت rtl تعریف کنید، دقت کنید که با این روش چینش تمام عناصر صفحه تغییر می کند و برای رفع این مشکل باید یک بلاک دیگر در زیر body داشته باشید که جهت آن ltr باشد.
نویسنده: مرتضی
زمان: ۱۹:۵۵:۲۶ - تاریخ: ۱۳۹۳/۰۳/۱۰
ببینین من 7 تا مرورگر تو سیستمم دارم اما هر کدوم واسه خودشون یه ساز میزنن. معلوم نیست این مرورگر ها رو بر اساس کدوم استاندار مشترکی میسازن! اگه w3c یک استاندارد مشخص کرده باشه پس این اداهای بی مزه ای که مرورگرها درمیارن چه معنی داره؟
مثلا جوابی که دادین با IE کار میکنه اما با کروم هیچ تغییری حاصل نمیشه (یعنی اسکرول بار عمودی همیشه سمت راسته)
مساله این یه مورد نیست شما خودتون بهتر میدونین که موارد از این قبیل بی شماره... مساله اینه که چرا شرکت هایی که مرورگر پس میندازن مثل آدمیزاد نمیان از استاندارد یکسانی پیروی کنن و پیشفرض هاشون رو هم یکی در نظر بگیرن؟
پاسخ: 
این مسئله سابقه دیرینه دارد و دقیقا به همین دلایل کنسرسیوم W3C شکل گرفت،‌ از زمان تعریف استانداردها توسط این کنسرسیوم مرورگرها رفته رفته در حال یکسان سازی پردازش ها هستند، اتفاقا متاسفانه IE در این راه از همه عقب تر است، به هر صورت یک سری موارد مانند آنچه شما به دنبالش هستید بعضا جزء اختیارات مرورگر حساب می شود که با کدنویسی قابل تغییر نیست!
نویسنده: Mostafa
زمان: ۱۸:۵۶:۰۸ - تاریخ: ۱۳۹۳/۰۴/۰۲
مرسی، بدردم خورد !
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...