PDA

View Full Version : ایجاد scroll bar و تغییر استایل آن


Joyebright
جمعه 06 بهمن 1391, 19:27 عصر
سلام دوستان چطور می تونم تو صفحم وقتی که متن بیش از اندازه ی مورد نظرم شد اسکرول ایجاد بشه یادآور بشم آگه می خواید روش overflow در css بگید خدمتون عرض کنم فقط مشکلم ایجاد استایل زیبا برای آن است که متفاوت شود با اسکرول خود مرورگر شود

ممنونم
Joyebright
جمعه 06 بهمن 1391, 19:49 عصر
دوستان یه جستجویی کردم تو چند تا سایت از جمله stackoverflow چند تا چیز دستم اومد فقط این دستورات از جمله :

<style type="text/css"> <!-- body{scrollbar-face-color: #000000; scrollbar-shadow-color: #2D2C4D; scrollbar-highlight-color:#7D7E94; scrollbar-3dlight-color: #7D7E94; scrollbar-darkshadow-color: #2D2C4D; scrollbar-track-color: #7D7E94; scrollbar-arrow-color: #C1C1D1; } --> </style>


مثله اینکه فقط تو IE و opera بالا میان چون جزء استانداردهای W3C نیست راه حل چیست؟
Joyebright
جمعه 06 بهمن 1391, 20:05 عصر
دوستان خودم مشکلو با پلاگینی که می زارم حل کردم امیدوارم شماهم اگه خواستید ازش استفاده کنید:بامزه::

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
tamafi6
شنبه 07 بهمن 1391, 22:49 عصر
این برای مرورگرهای webkit


::-webkit-scrollbar { background:#fff; width:10px;height:10px; }
::-webkit-scrollbar-thumb { background:#999; border-radius:5px; box-shadow:inset 0 0 10px #333; }

از خاصیت corner میتونید برای گوشه سمت راست صفحه استایل تنظیم کنید


::-webkit-scrollbar-corner { background:#fff; }

از خاصیت track میتونیم استایل نوار بکگراند اسکرول رو تغییر بدیم


::-webkit-scrollbar { background:#fff; width:10px;height:10px; }
::-webkit-scrollbar-thumb { background:#999; border-radius:5px; box-shadow:inset 0 0 10px #333; }
::-webkit-scrollbar-corner { background:#fff;}
::-webkit-scrollbar-track{ background:#eee; border-radius:5px; box-shadow:inset 0 0 10px #a
130000
چهارشنبه 23 بهمن 1392, 15:42 عصر
سلام

برای کروم کار میکنه . ولی چرا تو فایرفاکس کار نمیکنه؟؟؟ برای فایر فاکس باید چیکار کنیم؟؟؟

از پیشوند -moz- هم استفاده کردم نتیجه نداد.
colors
چهارشنبه 23 بهمن 1392, 15:54 عصر
دوستان اگر میخواید نمایش یکسانی داشته باشید, باید از جاوا اسکریپت کمک بگیرید. در غیر این صورت هر کاری هم با CSS انجام بدین بازم تو تعدادی از مرورگرها ناقص اجرا میشه.

این سایت (http://jscrollpane.kelvinluck.com/) هم اسکریپت JSش خیلی عالی کار میکنه :چشمک: