MCSM:Webconsole: умный скроллинг
Если бегунок находится в самом низу консоли, то включается автоскроллинг
This commit is contained in:
@@ -76,6 +76,7 @@ var ScrollingContent = React.createClass({
|
|||||||
ownHeight: 0,
|
ownHeight: 0,
|
||||||
scrollRatio: 0,
|
scrollRatio: 0,
|
||||||
lastPageY: 0,
|
lastPageY: 0,
|
||||||
|
autoScroll: true,
|
||||||
updateScrollParams: function () {
|
updateScrollParams: function () {
|
||||||
this.totalHeight = this.refs.content.scrollHeight;
|
this.totalHeight = this.refs.content.scrollHeight;
|
||||||
this.ownHeight = this.refs.content.clientHeight;
|
this.ownHeight = this.refs.content.clientHeight;
|
||||||
@@ -84,6 +85,10 @@ var ScrollingContent = React.createClass({
|
|||||||
|
|
||||||
var h = this.scrollRatio * 100;
|
var h = this.scrollRatio * 100;
|
||||||
if (h < 100) {
|
if (h < 100) {
|
||||||
|
if (this.autoScroll) {
|
||||||
|
this.refs.content.scrollTop = this.totalHeight;
|
||||||
|
}
|
||||||
|
|
||||||
this.refs.scroll.style.height = h + "%";
|
this.refs.scroll.style.height = h + "%";
|
||||||
this.refs.scroll.style.top = (this.refs.content.scrollTop / this.totalHeight) * 100 + "%";
|
this.refs.scroll.style.top = (this.refs.content.scrollTop / this.totalHeight) * 100 + "%";
|
||||||
}
|
}
|
||||||
@@ -116,10 +121,17 @@ var ScrollingContent = React.createClass({
|
|||||||
document.removeEventListener('mousemove', this.handleMouseMove);
|
document.removeEventListener('mousemove', this.handleMouseMove);
|
||||||
document.removeEventListener('mouseup', this.handleMouseUp);
|
document.removeEventListener('mouseup', this.handleMouseUp);
|
||||||
},
|
},
|
||||||
|
handleScroll: function (event) {
|
||||||
|
var zH = this.refs.gencon.offsetHeight;
|
||||||
|
var bottomPoint = ((this.refs.content.scrollTop / this.totalHeight) * zH) +
|
||||||
|
(this.scrollRatio * zH);
|
||||||
|
|
||||||
|
this.autoScroll = (bottomPoint === zH);
|
||||||
|
},
|
||||||
/*--------------------*/
|
/*--------------------*/
|
||||||
render: function () {
|
render: function () {
|
||||||
return (
|
return (
|
||||||
ce('div', {className: this.props.className},
|
ce('div', {className: this.props.className, ref: 'gencon'},
|
||||||
ce('div', {className: 'wrapper'},
|
ce('div', {className: 'wrapper'},
|
||||||
ce('div', {className: 'content', ref: 'content'}, this.props.children)
|
ce('div', {className: 'content', ref: 'content'}, this.props.children)
|
||||||
),
|
),
|
||||||
@@ -130,6 +142,7 @@ var ScrollingContent = React.createClass({
|
|||||||
componentDidMount: function () {
|
componentDidMount: function () {
|
||||||
this.updateScrollParams();
|
this.updateScrollParams();
|
||||||
this.refs.scroll.addEventListener('mousedown', this.handleMouseDown);
|
this.refs.scroll.addEventListener('mousedown', this.handleMouseDown);
|
||||||
|
this.refs.content.addEventListener('scroll', this.handleScroll);
|
||||||
|
|
||||||
var _this = this;
|
var _this = this;
|
||||||
this.refs.content.addEventListener('scroll', function(){
|
this.refs.content.addEventListener('scroll', function(){
|
||||||
|
|||||||
Reference in New Issue
Block a user