Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom classes to scrollbar and thumb elements #22

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Custom classes to scrollbar and thumb elements #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ Here's the list of all the options and the default values
thumbSize : false, // Set the size of the thumb to auto or a fixed number.
alwaysVisible: true, // Set to false to hide the scrollbar if not being used
autoUpdate: false // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available
thumbClass: [] // Custom classes to apply on 'scroll-thumb' element (Might be also a string)
scrollbarClass: [] // Custom classes to apply on 'scrollbar' element (Might be also a string)
}
```

Expand Down
3 changes: 0 additions & 3 deletions dist/ng-tiny-scrollbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,8 @@
background-color: #d3d3d3;
border-radius: 5px;
position: absolute;
top: 0;
right: 0;
width: 15px;
transition: 0.6s ease-in-out opacity;
height: 100%;
}
.scroll-bar.disable {
display: none;
Expand Down
42 changes: 39 additions & 3 deletions dist/ng-tiny-scrollbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,12 @@ angular.module('ngTinyScrollbar', [])
trackSize: false, // Set the size of the scrollbar to auto or a fixed number.
thumbSize: false, // Set the size of the thumb to auto or a fixed number.
alwaysVisible: true, // Set to false to hide the scrollbar if not being used
autoUpdate: false // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available
autoUpdate: false, // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available
thumbClass: [], // custom classes to be added to thumb
scrollbarClass: [], // custom classes to be added to scroll-bar
scrollBarOffsetTop: 0, //additional offset to position scrollbar
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can these offsets not be applied using CSS and the custom classes?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see now you're using it in the calculation. Let's modify this to be an object. Like:

scrollbarOffset: {
   top: 0,
   bottom: 0,
   left: 0,
   right: 0
}

Also there's a naming inconsistency scrollbarClass vs scrollBarOffset...

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's css problem with left offset. If applied it messes up position of scrollbar.
I'd apply only top, bottom and right offset, or would not apply any, and leave it to custom class

I did not analyze the code good enough to manipulate offset so easily. Should I just remove offsetting and mark an issue?

scrollBarOffsetBottom: 0, //additional offset to position scrollbar
scrollBarOffsetRight: 0, //additional offset to position scrollbar
};

this.$get = function () {
Expand Down Expand Up @@ -92,18 +97,47 @@ angular.module('ngTinyScrollbar', [])
if (!this.options.alwaysVisible) {
$scrollbar.css('opacity', 0);
}

self.applyClasses();
self.update();
setEvents();
return self;
};

this.applyClasses = function(){

// classes for scroll-bar
if (typeof this.options.scrollbarClass === 'string'){
$scrollbar.addClass(this.options.scrollbarClass);
} else if (typeof this.options.scrollbarClass === 'object'){
var x;
for (x in this.options.scrollbarClass){
$scrollbar.addClass(this.options.scrollbarClass[x])
}
}

// classes for thumb
if (typeof this.options.thumbClass === 'string'){
$thumb.addClass(this.options.thumbClass);
} else if (typeof this.options.thumbClass === 'object'){
var x;
for (x in this.options.thumbClass){
$thumb.addClass(this.options.thumbClass[x])
}
}

};

this.update = function(scrollTo) {
this.viewportSize = $viewport.prop('offset'+ sizeLabelCap);
this.contentSize = $overview.prop('scroll'+ sizeLabelCap);
this.contentRatio = this.viewportSize / this.contentSize;
this.trackSize = this.options.trackSize || this.viewportSize;
this.trackSize = (this.options.trackSize || this.viewportSize) - this.options.scrollBarOffsetTop - this.options.scrollBarOffsetBottom;
this.thumbSize = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio))));
this.trackRatio = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize);
this.scrollBarOffsetTop = this.options.scrollBarOffsetTop;
this.scrollBarOffsetBottom = this.options.scrollBarOffsetBottom;
this.scrollBarOffsetRight = this.options.scrollBarOffsetRight;
mousePosition = $scrollbar.prop('offsetTop');

$scrollbar.toggleClass('disable', this.contentRatio >= 1 || isNaN(this.contentRatio));
Expand All @@ -128,7 +162,9 @@ angular.module('ngTinyScrollbar', [])

ensureContentPosition();
$thumb.css(posiLabel, self.contentPosition / self.trackRatio + 'px');
$scrollbar.css(sizeLabel, self.trackSize + 'px');
$scrollbar.css('top', self.scrollBarOffsetTop + 'px');
$scrollbar.css('bottom', self.scrollBarOffsetBottom + 'px');
$scrollbar.css('right', self.scrollBarOffsetRight + 'px');
$thumb.css(sizeLabel, self.thumbSize + 'px');
$overview.css(posiLabel, -self.contentPosition + 'px');

Expand Down
2 changes: 1 addition & 1 deletion dist/ng-tiny-scrollbar.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/ng-tiny-scrollbar.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading