Scrolling fixes

This commit is contained in:
magnolia-fan 2011-06-28 03:25:27 +04:00
parent 18b2b910ae
commit 391288d861
3 changed files with 63 additions and 42 deletions

View File

@ -188,6 +188,7 @@
this.handleArrows = this.container.find('.scrollbar-handle-up, .scrollbar-handle-down'); this.handleArrows = this.container.find('.scrollbar-handle-up, .scrollbar-handle-down');
this.handleArrowUp = this.container.find('.scrollbar-handle-up'); this.handleArrowUp = this.container.find('.scrollbar-handle-up');
this.handleArrowDown = this.container.find('.scrollbar-handle-down'); this.handleArrowDown = this.container.find('.scrollbar-handle-down');
this.pane_last_top = 0;
// set some default CSS attributes (may be overwritten by CSS definitions in an external CSS file) // set some default CSS attributes (may be overwritten by CSS definitions in an external CSS file)
this.pane.defaultCss({ this.pane.defaultCss({
@ -388,7 +389,11 @@
// derive position of content from position of handle // derive position of content from position of handle
this.pane.top = -1 * this.props.handleContentRatio * this.handle.top; this.pane.top = -1 * this.props.handleContentRatio * this.handle.top;
// var distance = Math.round(Math.abs(this.pane_last_top - this.pane.top));
// $(this.pane[0]).stop().animate({top: this.pane.top}, 10 * distance / Math.sqrt(distance));
this.pane[0].style.top = this.pane.top + 'px'; this.pane[0].style.top = this.pane.top + 'px';
this.pane_last_top = this.pane.top;
}, },
@ -398,7 +403,7 @@
onMouseWheel: function(ev, delta){ onMouseWheel: function(ev, delta){
// calculate new handle position // calculate new handle position
this.handle.top -= delta*5; // awfull fix this.handle.top -= delta*15; // awfull fix
this.setHandlePosition(); this.setHandlePosition();
this.setContentPosition(); this.setContentPosition();

View File

@ -22,7 +22,9 @@
} }
/* Scrollbars */ /* Scrollbars */
.css-scrollbar {
.data-container {
.scrollbar-pane { .scrollbar-pane {
margin-right: 8px; margin-right: 8px;
} }
@ -34,8 +36,6 @@
.scrollbar-handle { .scrollbar-handle {
width: 8px; width: 8px;
} }
&.data-container {
.scrollbar-handle-container { .scrollbar-handle-container {
background-color: #FFF; background-color: #FFF;
} }
@ -50,9 +50,20 @@
background-color: #AAA; background-color: #AAA;
} }
} }
}
.player-container {
.scrollbar-pane {
margin-right: 8px;
} }
&.player-container { .scrollbar-handle-container {
width: 8px;
}
.scrollbar-handle {
width: 8px;
}
.scrollbar-handle-container { .scrollbar-handle-container {
background-color: #222; background-color: #222;
} }
@ -67,10 +78,8 @@
background-color: #888; background-color: #888;
} }
} }
}
} }
.error_page { .error_page {
position: relative; position: relative;
width: 600px; width: 600px;

View File

@ -18,27 +18,34 @@
border-color: #DDD; } border-color: #DDD; }
/* Scrollbars */ /* Scrollbars */
.css-scrollbar .scrollbar-pane { .data-container .scrollbar-pane {
margin-right: 8px; } margin-right: 8px; }
.css-scrollbar .scrollbar-handle-container { .data-container .scrollbar-handle-container {
width: 8px; } width: 8px; }
.css-scrollbar .scrollbar-handle { .data-container .scrollbar-handle {
width: 8px; } width: 8px; }
.css-scrollbar.data-container .scrollbar-handle-container { .data-container .scrollbar-handle-container {
background-color: #FFF; } background-color: #FFF; }
.css-scrollbar.data-container .scrollbar-handle { .data-container .scrollbar-handle {
background-color: #CCC; } background-color: #CCC; }
.css-scrollbar.data-container .scrollbar-handle:hover { .data-container .scrollbar-handle:hover {
background-color: #999; } background-color: #999; }
.css-scrollbar.data-container .scrollbar-handle.move { .data-container .scrollbar-handle.move {
background-color: #AAA; } background-color: #AAA; }
.css-scrollbar.player-container .scrollbar-handle-container {
.player-container .scrollbar-pane {
margin-right: 8px; }
.player-container .scrollbar-handle-container {
width: 8px; }
.player-container .scrollbar-handle {
width: 8px; }
.player-container .scrollbar-handle-container {
background-color: #222; } background-color: #222; }
.css-scrollbar.player-container .scrollbar-handle { .player-container .scrollbar-handle {
background-color: #444; } background-color: #444; }
.css-scrollbar.player-container .scrollbar-handle:hover { .player-container .scrollbar-handle:hover {
background-color: #666; } background-color: #666; }
.css-scrollbar.player-container .scrollbar-handle.move { .player-container .scrollbar-handle.move {
background-color: #888; } background-color: #888; }
.error_page { .error_page {