جلوگیری از نمایش اسکرول بار در حالتی که یک المنت خارج از محدوده مرورگر قرار میگیرد

neopersia · Mar 10, 2010

سلام

این کد رو ببینید:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css">
body {
	background-color:#171717;
	direction:rtl;
	font:12px/140% Tahoma;
}
#history {
	position: absolute;
	top:0;
	left:-150px;
	background-color: #fff;
	border: 1px #333 solid; 
}

#history .container {padding:15px;white-space: nowrap;}
#history ul,#history li{padding:0;margin:0;}
#history ul{padding-right:15px;}
</style>
</head>
<body>

<div id="history">
	<div class="container">
		<ul>
			<li><a href="#">متن لینک متن لینک</a></li>
			<li><a href="#">متن لینک متن لینک</a></li>
			<li><a href="#">متن لینک متن لینک</a></li>
			<li><a href="#">متن لینک متن لینک</a></li>
			<li><a href="#">متن لینک متن لینک</a></li>
			<li><a href="#">متن لینک متن لینک</a></li>
			<li><a href="#">متن لینک متن لینک</a></li>
		</ul>
	</div>
</div>

</body>
</html>

من همین حالت رو لازم دارم بدون اینکه اسکرول بار افقی نمایش داده بشه. میدونم شدنی هست اما هر چی تست کردم به نتیجه نرسید
کلاً میخوام که DIV#history رو خارج از محدوده دید قرار بدم و با یک سری رویداد خاص اینو حرکتش بدم به سمت چپ تا بیاد تو صفحه. همه چیزش درست کار میکنه فقط همین اسکرول بار پایین صفحه اضافیه!
در ضمن DIV#history عرض مشخصی هم نداره یعنی عرضش بسته به طول لینکهای داخل اون تغییر میکنه

کسی میتونه راه حلی پیشنهاد بده؟

neopersia · Mar 10, 2010

مثل اینکه اگه DIV#history به جای چپ سمت راست باشه از شر اون اسکرول بار خلاص میشم.
نمیخواستم بره راست چون منوی سایت اون طرف هست و کشیده میشه روی منو ولی ظاهراً چاره ای نیست.
به این نتیجه رسیدم که امکانش نیست که توی صفحه راست به چپ کاری رو که من میخوام انجام داد، ولی امیدوارم نتیجه گیریم اشتباه باشه و یه راهی داشته باشه :green:

pouya saadeghi · Mar 10, 2010

برای اینجور کار ها معمولا از position:absolute استفاده میشه.

silverboy65 · Mar 10, 2010

کلا باید جاوا اسکریپتش کنی
ولی اگه می خوای معلوم نباشه می تونی از قابلیت هایی مثل Z-INdEX استفاده کنی

neopersia · Mar 10, 2010

pouya saadeghi گفت:
برای اینجور کار ها معمولا از position:absolute استفاده میشه.

مگه بدون position: absolute هم میشه؟! شما کد منو خوندید؟

کد:

#history {
	[COLOR="Red"]position: absolute;[/COLOR]
	top:0;
	left:-150px;
	background-color: #fff;
	border: 1px #333 solid; 
}

silverboy65 گفت:
کلا باید جاوا اسکریپتش کنی
ولی اگه می خوای معلوم نباشه می تونی از قابلیت هایی مثل Z-INdEX استفاده کنی

ممنون اما جاوا اسکرپت هست من مشکلی با جاوا اسکرپتش ندارم فقط کد قسمت مشکل ساز رو برای این تاپیک نوشتم اون اسکرول بار پایین صفحه رو میخواستم حذف کنم.
اگر جاوا اسکرپت نبود که با display:none و display:block مثل آب خوردن حل میشد! این بلوک هیستوری باید از خارج صفحه انیمیشن بشه بیاد تو. حتی اگر عرضش هم ثابت بود میتونستم به جای left از width برای انیمیشن استفاده کنم ولی عرض ثابت هم نداره.
z-index رو هم توی کد اصلی دارم ولی اون ترتیب نمایش لایه ها رو مشخص میکنه و فکر نمیکنم ربطی به مشکل داشته باشه البته در هر صورت با وجود اون هم مشکل سر جاش باقیه

pouya saadeghi · Mar 10, 2010

عذر میخوام
---------------------------------
مشکل از direction:rtl است.
در IE و Firefox مشکل داره که اگه direction:ltr باشه مشکل حل میشه

neopersia · Mar 10, 2010

pouya saadeghi گفت:
عذر میخوام
---------------------------------
مشکل از direction:rtl است.
در IE و Firefox مشکل داره که اگه direction:ltr باشه مشکل حل میشه

درسته اینو دیشب متوجه شدم چون دیدم کد رو وقتی تو صفحه چپ به راست مینویسم درست میشه اون بلوک رو بردم سمت راست درست شد
فکر کنم اگه بادی رو چپ به سایت کنم DIV#history رو خارج از wrapper بزارم بعد wrapper رو راست به چپ کنم درست بشه همونی که میخوام

البته احتمالاً به قیمت جابجه شدن جای اسکرول بار عمودی توی IE تموم میشه ولی اون دیگه مشکل کسانی هست که IE استفاده میکنن :green: