i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت متفاوت و کاملتر خواهد بود، این فرآیند زمانبر است و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی نمایش و به تناوب به روزرسانی می شود.
article

حذف اسکرول افقی (Horizontal Scroll) با CSS

css-horizontal-scroll

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

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


علت عمده بروز مشکل نمایش اسکرول بار افقی در صفحات وب به تعریف نادرست یا ناهماهنگ عرض عناصر HTML صفحه و استایل دهی آنها در CSS مربوط می شود، به طور مثال اگر بلاکی با عرض 200 پیکسل را در بلاکی دیگر با عرض 190 پیکسل قرار دهیم مسلما در حالت عادی با مشکل نمایش اسکرول بار افقی مواجه خواهیم شد، یا به فرض اگر در ساختار و اسکلت بندی قالب سایت یا وبلاگمان عرض زیادی برای چارچوب کار در نظر بگیریم که این عرض از اندازه صفحه نمایش کاربران بیشتر باشد، مرورگر به صورت خودکار اسکرول افقی را نمایش خواهد داد، مثال دیگر در این خصوص اشتباه در مقداردهی درصدی در حین طراحی قالب های واکنشگرا یا نسخه های مخصوص موبایل است، به فرض اگر بلاک والد 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>
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
» ساخت بلاک شناور عمودی با CSS
» ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
» ساخت منوی کشویی با تگ ul li و CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
commentنظرات (۲۸ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: حمید
زمان: ۱۳:۰۱:۴۷ - تاریخ: ۱۳۹۱/۰۶/۲۰
ممنون از شما عالی بود. برای من کار کرد
نویسنده: علیرضا جمالی
زمان: ۲۳:۱۳:۱۷ - تاریخ: ۱۳۹۱/۰۶/۲۶
سلام. ممنون واقعا به کارم اومد .
نویسنده: مسعود زاهدي
زمان: ۱۷:۵۴:۲۹ - تاریخ: ۱۳۹۱/۰۸/۱۲
سلام ممنون مفيد بود فقط يه سوال
وقتي اسكرول عمودي هايدن ميشه ديگه صفحه به هيچ وجه بالا و پايين نميشه
راهي هست كه بشه اونم حل كرد ؟
پاسخ: 
راه حل ساده ای وجود ندارد، شاید یک تکنیک این باشد که بلاکی که می خواهید اسکرول داشته باشد را با عرض بیشتر، درون بلاکی دیگر با عرض کمتر و با اسکرول بار مخفی قرار دهید، به این ترتیب اسکرول بلاک درونی در زیر بلاک بدون اسکرول مخفی می شود در حالی که محتوای درون آن قابل اسکرول است (تست نشده).
نویسنده: حسن
زمان: ۰۰:۵۷:۳۵ - تاریخ: ۱۳۹۱/۰۹/۲۵
خیلی ممنون عالی بود
نویسنده: باران
زمان: ۱۲:۳۵:۰۵ - تاریخ: ۱۳۹۱/۱۲/۱۴
ممنون خیلی عالی بود
نویسنده: امینی
زمان: ۱۰:۵۹:۴۷ - تاریخ: ۱۳۹۲/۰۱/۱۹
سلام
تشکر و سپاس فراوان بابت سایت خوب و اطلاعات مفید
نویسنده: 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




6 × 3
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

امکان بهره مندی از تخفیف