تعرف على اضافة Nice Scroll لتجميل شكل ال Scroll bar في موقعك

تعرف على اضافة Nice Scroll لتجميل شكل ال Scroll bar في موقعك

شارك هذا المقال:



لأن عالم تصميم الويب أصبح شديد التنافسية في الفترة الأخيرة , علينا دائماً ليس فقط تعلم ما هو جديد , بل اختراع منهج جديد في التصميم يوافق رغبات عملائنا ويحقق لنا التميز في مجال مهم كتصميم الويب , ونقدم اليوم طريقة مميزة للتلاعب بشكل الشريط الجانبي للمتصفح عبر اضافة ليست جديدة على الساحة , اضافة Nice Scroll

ما هي اضافة Nice Scroll ؟

Nice Scroll: إضافة jQuery بسيطة تستبدل شريط التمرير الإضافي للمتصفح بشريط تمرير مخصص يمكن تعديله بما يناسبك بشكل سهل وسريع ومن أهم ميزاتها:

التوافق مع جميع المتصفحات: Firefox 4+, Chrome 5+, Safari 4+ , Opera 10+, IE 6+.

التوافق مع جميع الأجهزة المحمولة

التوافق مع جميع الأجهزة التي تعمل باللمس

سهولة الاستخدام

طريقة تضمين اضافة Nice Scroll في موقعك

بما أنها أساساً تعتمد على jQuery فلا بد من تضمين مكتبة jQuery وبعدها تضمين الإضافة، يمكنك تضمينها بإحدى الطريقتين:

تحميلها على جهازك من الرابط التالي https://github.com/inuyaksa/jquery.nicescroll وأخذ ملف jquery.nicescroll.js ووضعه في مجلد js ضمن مجلد المشروع:

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
 

او يمكنك تضمينها عبر CDN:

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
 

هذه الخطوة البسيطة ستكون قادراً على استخدام جميع ميزات هذه الإضافة الرائعة، سنبني معاً صفحة ويب بسيطة لنشاهد كيف يمكن تخصيص شريط التمرير:

في هذه الصفحة يظهر لنا شريط التمرير واضحاً على اليمين وهو الشريط الافتراضي الذي نريد تغييره، نقوم بالتغيير بإضافة كود javascript بسيط جداً:

<script> 
 $(function() {
   $("html").niceScroll();
 });
</script>
 

هذه التعليمات لتطبيق الإضافة على العنصر الجذر html بالكامل فتظهر الصفحة بالشكل:

ونلاحظ بوضوح كيف تغير شكل شريط التمرير، وبالطبع يمكن تطبيق هذه الإضافة على أي عنصر داخل html وليس بالضرورة أن يتم تطبيقه على كامل الصفحة، سنقوم الآن بتعديل بعض الخصائص الافتراضية لتغيير مظهره.

$(function() {
	$("html").niceScroll({
       cursorcolor: "#F00" //Change the scroll bar color
     });
});
 

ونلاحظ تغير لون شريط التمرير:

cursoropacitymin: شفافية لون شريط التمرير عندما يكون المستخدم لا يحرك المحتوى القيمة الافتراضية هي 0 ويمكن إعطائها قيمة بين 0 و1

cursoropacitymax : : شفافية لون شريط التمرير عندما يكون المستخدم يحرك المحتوى القيمة الافتراضية هي 1 ويمكن إعطائها قيمة بين 0 و1

cursorwidth : عرض شريط التمرير بالبكسل، القيمة الافتراضية هي 5

cursorborder: خصائص CSS لحواف شريط التمرير والقيمة الافتراضية هي: 1px solid #fff

cursorborderradius: قيمة border-radius لشريط التمرير ،القيمة الافتراضية 4px

zindex: قيمة z-index لشريط التمرير، القيمة الافتراضية هي 9999

scrollspeed: سرعة التمرير، القيمة الافتراضية هي 60

mousescrollstep: سرعة التمرير أثناء التحريك بالفأرة، القيمة الافتراضية هي 40

autohidemode: إخفاء شريط التمرير عندما لا يتحرك المحتوى القيمة الافتراضية هي true لذلك نلاحظ في البداية أن شريط التمرير يختفي في حال عدم تحريك المحتوى وإذا تم تغيير قيمة هذه الخاصية إلى false سيبقى الشريط ظاهراً في جميع الأحوال.

background: لون المكان الذي يتحرك فيه شريط التمرير مثلاً إذا أعطينا هذه الخاصية القيمة #007 سيظهر بالشكل:

smoothscroll: تحريك شريط التمرير بشكل سلس، القيمة الافتراضية هي true ويمكن تغييرها إلى false

horizrailenabled: إمكانية استخدام شريط التمرير الأفقي، القيمة الافتراضية هي true

إن هذه الإضافة بخصائصها الممتازة وسهولة استخدامها لا شك ستنال إعجاب زوار موقعك من النظرة الأولى، أنصحكم بتجريبها ويمكنكم طرح أي سؤال قد يخطر ببالكم في موقع نقرة لتتم الإجابة عليه بالسرعة الممكنة.

مثال كامل على اضافة Nice Scroll

وسنطرح الان مثال متكامل , سنضع فيه جميع خصائص الاضافة لتستطيع نسخها وتعديلها كما تحتاج , تذكر دائماً انك لست بحاجة لاستخدام جميع الخيارات , يمكنك ان تكتفي بتفعيل الاضفة على العنصر , تعطيك الخيارات مزيد من التخصيص لا أكثر

("body").niceScroll({
    cursorcolor: "#424242", // change cursor color in hex
    cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
    cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
    cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
    cursorborder: "1px solid #fff", // css definition for cursor border
    cursorborderradius: "5px", // border radius in pixel for cursor
    zindex: "auto" | [number], // change z-index for scrollbar div
    scrollspeed: 60, // scrolling speed
    mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
    touchbehavior: false, // DEPRECATED!! use "emulatetouch"
    emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computer
    hwacceleration: true, // use hardware accelerated scroll when supported
    boxzoom: false, // enable zoom for box content
    dblclickzoom: true, // (only when boxzoom=true) zoom activated when double click on box
    gesturezoom: true, // (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box
    grabcursorenabled: true // (only when touchbehavior=true) display "grab" icon
    autohidemode: true, // how hide the scrollbar works, possible values: true | // hide when no scrolling"cursor" | // only cursor hiddenfalse | // do not hide,"leave" | // hide only if pointer leaves content"hidden" | // hide always"scroll", // show only on scroll          
    background: "", // change css for rail background
    iframeautoresize: true, // autoresize iframe on load event
    cursorminheight: 32, // set the minimum cursor height (pixel)
    preservenativescrolling: true, // you can scroll native scrollable areas with mouse, bubbling mouse wheel event
    railoffset: false, // you can add offset top/left for rail position
    bouncescroll: false, // (only hw accell) enable scroll bouncing at the end of content as mobile-like 
    spacebarenabled: true, // enable page down scrolling when space bar has pressed
    railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // set padding for rail bar
    disableoutline: true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll
    horizrailenabled: true, // nicescroll can manage horizontal scroll
    railalign: right, // alignment of vertical rail
    railvalign: bottom, // alignment of horizontal rail
    enabletranslate3d: true, // nicescroll can use css translate to scroll content
    enablemousewheel: true, // nicescroll can manage mouse wheel events
    enablekeyboard: true, // nicescroll can manage keyboard events
    smoothscroll: true, // scroll with ease movement
    sensitiverail: true, // click on rail make a scroll
    enablemouselockapi: true, // can use mouse caption lock API (same issue on object dragging)
    cursorfixedheight: false, // set fixed height for cursor in pixel
    hidecursordelay: 400, // set the delay in microseconds to fading out scrollbars
    directionlockdeadzone: 6, // dead zone in pixels for direction lock activation
    nativeparentscrolling: true, // detect bottom of content and let parent to scroll, as native scroll does
    enablescrollonselection: true, // enable auto-scrolling of content when selection text
    cursordragspeed: 0.3, // speed of selection when dragged with cursor
    rtlmode: "auto", // horizontal div scrolling starts at left side
    cursordragontouch: false, // drag cursor in touch / touchbehavior mode also
    oneaxismousemode: "auto", // it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse
    scriptpath: "" // define custom path for boxmode icons ("" => same script path)
    preventmultitouchscrolling: true // prevent scrolling on multitouch events
    disablemutationobserver: false // force MutationObserver disabled,
    enableobserver: true // enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed
    scrollbarid: false // set a custom ID for nicescroll bars 
});
 

في النهاية ...

ما رأيك في اضافة Nice Scroll ؟ وهل من المكن أن تستخدمها في مشروعك القادم ؟ شا ركنا النقاش على صفحتنا في الفيسبوك

https://www.facebook.com/naqrahOfficial



ما رأيك في هذا المقال؟

كيف تقييم نوعية المحتوى في نقرة؟

5 4 3 2 1