مثال اسکرول پیشفرض #
فقط از ویژگی داده data-simplebar
استفاده کنید و max-height: **px یا ارتفاع ثابت اضافه کنید
SimpleBar یک رفتار اسکرول سفارشی را پیادهسازی نمیکند. این نوار اسکرول بومی
overflow: auto را حفظ میکند و فقط ظاهر بصری نوار اسکرول را جایگزین میکند.
آن را به شکلی که میخواهید طراحی کنید
SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
سبک و کارا
فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.
در همه جا پشتیبانی میشود
SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox، Safari، Edge، IE11.
<div class="px-3" data-simplebar style="max-height: 250px;">
SimpleBar تنها یک کار انجام میدهد: جایگزینی نوار اسکرول پیشفرض مرورگر
با یک نوار کشویی CSS سفارشی بدون از دست دادن عملکردها.
بر خلاف برخی از افزونههای محبوب، SimpleBar از جاوا اسکریپت برای تقلید اسکرول استفاده نمیکند،
که باعث جیکجیکها و رفتارهای عجیب اسکرولی میشود...
شما عظمت اسکرول بومی را حفظ میکنید... با یک نوار اسکرول سفارشی!
<p>SimpleBar <strong>یک رفتار اسکرول سفارشی را پیادهسازی نمیکند</strong>. این
نوار اسکرول <strong>بومی</strong>
<code>overflow: auto</code> را حفظ میکند و <strong>فقط</strong>
ظاهر بصری نوار اسکرول را جایگزین میکند.
</p>
<h5>آن را به شکلی که میخواهید طراحی کنید</h5>
<p>SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی
آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان
صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
</p>
<h5>سبک و کارا</h5>
<p>فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت
اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.</p>
<h5>در همه جا پشتیبانی میشود</h5>
<p>SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox،
Safari، Edge، IE11.</p>
</div>
موقعیت RTL #
فقط از ویژگی داده
data-simplebar data-simplebar-direction='rtl'
استفاده کنید و max-height: **px یا ارتفاع ثابت اضافه کنید
SimpleBar یک رفتار اسکرول سفارشی را پیادهسازی نمیکند. این نوار اسکرول بومی
overflow: auto را حفظ میکند و فقط ظاهر بصری نوار اسکرول را جایگزین میکند.
آن را به شکلی که میخواهید طراحی کنید
SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
سبک و کارا
فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.
در همه جا پشتیبانی میشود
SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox، Safari، Edge، IE11.
<div class="px-3" data-simplebar data-simplebar-direction='rtl' style="max-height: 250px;">
SimpleBar تنها یک کار انجام میدهد: جایگزینی نوار اسکرول پیشفرض مرورگر
با یک نوار کشویی CSS سفارشی بدون از دست دادن عملکردها.
بر خلاف برخی از افزونههای محبوب، SimpleBar از جاوا اسکریپت برای تقلید اسکرول استفاده نمیکند،
که باعث جیکجیکها و رفتارهای عجیب اسکرولی میشود...
شما عظمت اسکرول بومی را حفظ میکنید... با یک نوار اسکرول سفارشی!
<p>SimpleBar <strong>یک رفتار اسکرول سفارشی را پیادهسازی نمیکند</strong>. این
نوار اسکرول <strong>بومی</strong>
<code>overflow: auto</code> را حفظ میکند و <strong>فقط</strong>
ظاهر بصری نوار اسکرول را جایگزین میکند.
</p>
<h5>آن را به شکلی که میخواهید طراحی کنید</h5>
<p>SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی
آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان
صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
</p>
<h5>سبک و کارا</h5>
<p>فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت
اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.</p>
<h5>در همه جا پشتیبانی میشود</h5>
<p>SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox،
Safari، Edge، IE11.</p>
</div>
اندازه اسکرول #
فقط از ویژگی داده data-simplebar، data-simplebar-lg استفاده کنید و max-height: **px یا ارتفاع ثابت اضافه کنید
SimpleBar یک رفتار اسکرول سفارشی را پیادهسازی نمیکند. این نوار اسکرول بومی
overflow: auto را حفظ میکند و فقط ظاهر بصری نوار اسکرول را جایگزین میکند.
آن را به شکلی که میخواهید طراحی کنید
SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
سبک و کارا
فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.
در همه جا پشتیبانی میشود
SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox، Safari، Edge، IE11.
<div class="px-3" data-simplebar data-simplebar-lg style="max-height: 250px;">
SimpleBar تنها یک کار انجام میدهد: جایگزینی نوار اسکرول پیشفرض مرورگر
با یک نوار کشویی CSS سفارشی بدون از دست دادن عملکردها.
بر خلاف برخی از افزونههای محبوب، SimpleBar از جاوا اسکریپت برای تقلید اسکرول استفاده نمیکند،
که باعث جیکجیکها و رفتارهای عجیب اسکرولی میشود...
شما عظمت اسکرول بومی را حفظ میکنید... با یک نوار اسکرول سفارشی!
<p>SimpleBar <strong>یک رفتار اسکرول سفارشی را پیادهسازی نمیکند</strong>. این
نوار اسکرول <strong>بومی</strong>
<code>overflow: auto</code> را حفظ میکند و <strong>فقط</strong>
ظاهر بصری نوار اسکرول را جایگزین میکند.
</p>
<h5>آن را به شکلی که میخواهید طراحی کنید</h5>
<p>SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی
آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان
صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
</p>
<h5>سبک و کارا</h5>
<p>فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت
اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.</p>
<h5>در همه جا پشتیبانی میشود</h5>
<p>SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox،
Safari، Edge، IE11.</p>
</div>
رنگ اسکرول #
فقط از ویژگی داده
data-simplebar data-simplebar-*
استفاده کنید و max-height: **px یا ارتفاع ثابت اضافه کنید
SimpleBar یک رفتار اسکرول سفارشی را پیادهسازی نمیکند. این نوار اسکرول بومی
overflow: auto را حفظ میکند و فقط ظاهر بصری نوار اسکرول را جایگزین میکند.
آن را به شکلی که میخواهید طراحی کنید
SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
سبک و کارا
فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.
در همه جا پشتیبانی میشود
SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox، Safari، Edge، IE11.
<div class="px-3" data-simplebar data-simplebar-primary style="max-height: 250px;">
SimpleBar تنها یک کار انجام میدهد: جایگزینی نوار اسکرول پیشفرض مرورگر
با یک نوار کشویی CSS سفارشی بدون از دست دادن عملکردها.
بر خلاف برخی از افزونههای محبوب، SimpleBar از جاوا اسکریپت برای تقلید اسکرول استفاده نمیکند،
که باعث جیکجیکها و رفتارهای عجیب اسکرولی میشود...
شما عظمت اسکرول بومی را حفظ میکنید... با یک نوار اسکرول سفارشی!
<p>SimpleBar <strong>یک رفتار اسکرول سفارشی را پیادهسازی نمیکند</strong>. این
نوار اسکرول <strong>بومی</strong>
<code>overflow: auto</code> را حفظ میکند و <strong>فقط</strong>
ظاهر بصری نوار اسکرول را جایگزین میکند.
</p>
<h5>آن را به شکلی که میخواهید طراحی کنید</h5>
<p>SimpleBar از CSS خالص برای طراحی نوار اسکرول استفاده میکند. شما میتوانید به آسانی
آن را به هر شکلی که میخواهید سفارشی کنید! یا حتی میتوانید چندین طراحی در همان
صفحه داشته باشید... یا فقط سبک پیشفرض ("نوار اسکرول Mac OS") را حفظ کنید.
</p>
<h5>سبک و کارا</h5>
<p>فقط 6 کیلوبایت به حداقل رسانده شده است. SimpleBar از جاوا اسکریپت برای مدیریت
اسکرول استفاده نمیکند. شما عملکردها/رفتارهای اسکرول بومی را حفظ میکنید.</p>
<h5>در همه جا پشتیبانی میشود</h5>
<p>SimpleBar در مرورگرهای زیر آزمایش شده است: Chrome، Firefox،
Safari، Edge، IE11.</p>
</div>