f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 03:02:40 +00:00
Code Wiki Activity

Optimize for smooth scrolling of BrewRenderer

Browse Source 
The will-change property allows the browser to optimize for smoother animations. This completely eliminates the scrolling stutter.
This commit is contained in:
Trevor Buckner
2018-05-10 12:44:49 -04:00
committed by Rae2che5
parent cbbb7292d9
commit 825c259fba
2 changed files with 56 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -25,6 +25,7 @@ const BrewRenderer = createClass({
return {
viewablePageNumber : 0,
height : 0,
willChange : 'auto',
isMounted : false,
usePPR : true,
@@ -125,22 +126,43 @@ const BrewRenderer = createClass({
});
return this.lastRender;
},
/**
* Optimize for smooth scrolling when mouse enters the rendering panel
**/
prepareScroll : function(){
this.setState({willChange : 'transform'});
},
/**
* Unload smooth scrolling optimizations when mouse leaves rendering panel
**/
unprepareScroll : function(){
this.setState({willChange : 'auto'});
},
render : function(){
return <div className='brewRenderer'
onScroll={this.handleScroll}
ref='main'
style={{ height: this.state.height }}>
return (
<React.Fragment>
<div className='brewRenderer'
onScroll={this.handleScroll}
onMouseOver={this.prepareScroll}
onMouseOut={this.unprepareScroll}
ref='main'
style={{ height: this.state.height,
willChange: this.state.willChange}}>
<ErrorBar errors={this.props.errors} />
<RenderWarnings />
<ErrorBar errors={this.props.errors} />
<RenderWarnings />
<div className='pages' ref='pages'>
{this.renderPages()}
</div>
{this.renderPageInfo()}
{this.renderPPRmsg()}
</div>;
<div className='pages' ref='pages'>
{this.renderPages()}
</div>
</div>;
{this.renderPageInfo()}
{this.renderPPRmsg()}
</React.Fragment>
);
}
});

44
client/homebrew/brewRenderer/brewRenderer.less
View File

@@ -5,28 +5,6 @@
}
.brewRenderer{
overflow-y : scroll;
.pageInfo{
position : absolute;
right : 17px;
bottom : 0;
z-index : 1000;
padding : 8px 10px;
background-color : #333;
font-size : 10px;
font-weight : 800;
color : white;
}
.ppr_msg{
position : absolute;
left : 0px;
bottom : 0;
z-index : 1000;
padding : 8px 10px;
background-color : #333;
font-size : 10px;
font-weight : 800;
color : white;
}
.pages{
margin : 30px 0px;
&>.phb{
@@ -36,4 +14,26 @@
box-shadow : 1px 4px 14px #000;
}
}
}
.pageInfo{
position : absolute;
right : 17px;
bottom : 0;
z-index : 1000;
padding : 8px 10px;
background-color : #333;
font-size : 10px;
font-weight : 800;
color : white;
}
.ppr_msg{
position : absolute;
left : 0px;
bottom : 0;
z-index : 1000;
padding : 8px 10px;
background-color : #333;
font-size : 10px;
font-weight : 800;
color : white;
}