Archived
0

MCSM:Webconsole: умный скроллинг

Если бегунок находится в самом низу консоли, то включается автоскроллинг
This commit is contained in:
2017-06-14 21:09:22 +03:00
parent 6a89096325
commit 2fca454179

View File

@@ -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(){