شارك هذا المقال:
لأن عالم تصميم الويب أصبح شديد التنافسية في الفترة الأخيرة , علينا دائماً ليس فقط تعلم ما هو جديد , بل اختراع منهج جديد في التصميم يوافق رغبات عملائنا ويحقق لنا التميز في مجال مهم كتصميم الويب , ونقدم اليوم طريقة مميزة للتلاعب بشكل الشريط الجانبي للمتصفح عبر اضافة ليست جديدة على الساحة , اضافة Nice Scroll
Nice Scroll: إضافة jQuery بسيطة تستبدل شريط التمرير الإضافي للمتصفح بشريط تمرير مخصص يمكن تعديله بما يناسبك بشكل سهل وسريع ومن أهم ميزاتها:
التوافق مع جميع المتصفحات: Firefox 4+, Chrome 5+, Safari 4+ , Opera 10+, IE 6+.
التوافق مع جميع الأجهزة المحمولة
التوافق مع جميع الأجهزة التي تعمل باللمس
سهولة الاستخدام
بما أنها أساساً تعتمد على 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
إن هذه الإضافة بخصائصها الممتازة وسهولة استخدامها لا شك ستنال إعجاب زوار موقعك من النظرة الأولى، أنصحكم بتجريبها ويمكنكم طرح أي سؤال قد يخطر ببالكم في موقع نقرة لتتم الإجابة عليه بالسرعة الممكنة.
وسنطرح الان مثال متكامل , سنضع فيه جميع خصائص الاضافة لتستطيع نسخها وتعديلها كما تحتاج , تذكر دائماً انك لست بحاجة لاستخدام جميع الخيارات , يمكنك ان تكتفي بتفعيل الاضفة على العنصر , تعطيك الخيارات مزيد من التخصيص لا أكثر
("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