React : Setting scrollTop on Div doesn't work in a specific case
0
I have been stuck at this since today morning and I still can't figure out where did I go wrong. I wanted to highlight text inside a textarea input type. I know this isn't possible, but I found a clever solution to cheat the viewer into thinking that. Here is the link to the article and Here is the link to the codeio pen for the project.
I have been trying to recreate the same using react and normal javascript but the scrollTop property for div with className highlight just doesn't work. If someone could help me debug what I'm doing wrong, that would be wonderful!
class CodeTextArea extends React.Component {
constructor(props){
super(props);
this.state = {scrollTop: 0,
scrollLeft: 0
};
this.setScroll = this.setScroll.bind(this);
}
setScroll(top,left){
this.setState({scrollTop: top, scrollLeft: left});
}
render(){
return(
<div class="container">
<div class="backdrop">
<Highlight scrollTop={this.state.scrollTop} scrollLeft={this.state.scrollLeft}/>
</div>
<Textarea setScrollTop={this.setScroll}/>
</div>
);
}
}
class Highlight extends React.Component {
constructor(props){
super(props);
this.divRef = React.createRef();
}
componentDidUpdate(prevProps){
if (this.props.scrollTop !== prevProps.scrollTop) {
/*console.log(this.divRef.current);
console.log(this.props.scrollTop);
console.log(this.props.scrollLeft);*/
this.divRef.current.scrollTop = this.props.scrollTop;
}
}
render(){
return (
<div class="highlights" ref={this.divRef}><mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
);
}
}
class TogglePerspective extends React.Component {
constructor(props){
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.buttonRef = React.createRef();
}
clickHandler(){
}
render(){
return (
<button onClick={this.clickHandler} ref={this.buttonRef}>Toggle Perspective</button>
);
}
}
class Textarea extends React.Component {
constructor(props){
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleChange = this.handleChange.bind(this);
this.applyHighlights = this.applyHighlights.bind(this);
this.textareaRef = React.createRef();
this.state = {value: 'This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.'};
}
applyHighlights(text){
return text
.replace(/n$/g, 'nn')
.replace(/[A-Z].*?b/g, '<mark>$&</mark>');
}
handleScroll(){
let scrollTop = this.textareaRef.current.scrollTop;
let scrollLeft = this.textareaRef.current.scrollLeft;
this.props.setScrollTop(scrollTop,scrollLeft);
}
handleChange(event){
let textareaValue = event.targrt.value;
this.setState({value: textareaValue});
let highlightedText = this.applyHighlights(textareaValue);
}
render(){
return (
<textarea ref={this.textareaRef} value={this.state.value} onChange={this.handleChange} onScroll={this.handleScroll}></textarea>
);
}
}
class Editor extends React.Component {
render(){
return (
<div>
<CodeTextArea />
<TogglePerspective />
</div>
);
}
}
ReactDOM.render(
<Editor />,
document.getElementById('root')
);
Here is the codeIo pen to my recreation. Just please tell me why the
highlight class div scrollTop attribute is not working.
I don't usually post long code here unless I'm truly frustrated so any help is appreciated.
javascript jquery html css reactjs
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
add a comment |
0
I have been stuck at this since today morning and I still can't figure out where did I go wrong. I wanted to highlight text inside a textarea input type. I know this isn't possible, but I found a clever solution to cheat the viewer into thinking that. Here is the link to the article and Here is the link to the codeio pen for the project.
I have been trying to recreate the same using react and normal javascript but the scrollTop property for div with className highlight just doesn't work. If someone could help me debug what I'm doing wrong, that would be wonderful!
class CodeTextArea extends React.Component {
constructor(props){
super(props);
this.state = {scrollTop: 0,
scrollLeft: 0
};
this.setScroll = this.setScroll.bind(this);
}
setScroll(top,left){
this.setState({scrollTop: top, scrollLeft: left});
}
render(){
return(
<div class="container">
<div class="backdrop">
<Highlight scrollTop={this.state.scrollTop} scrollLeft={this.state.scrollLeft}/>
</div>
<Textarea setScrollTop={this.setScroll}/>
</div>
);
}
}
class Highlight extends React.Component {
constructor(props){
super(props);
this.divRef = React.createRef();
}
componentDidUpdate(prevProps){
if (this.props.scrollTop !== prevProps.scrollTop) {
/*console.log(this.divRef.current);
console.log(this.props.scrollTop);
console.log(this.props.scrollLeft);*/
this.divRef.current.scrollTop = this.props.scrollTop;
}
}
render(){
return (
<div class="highlights" ref={this.divRef}><mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
);
}
}
class TogglePerspective extends React.Component {
constructor(props){
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.buttonRef = React.createRef();
}
clickHandler(){
}
render(){
return (
<button onClick={this.clickHandler} ref={this.buttonRef}>Toggle Perspective</button>
);
}
}
class Textarea extends React.Component {
constructor(props){
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleChange = this.handleChange.bind(this);
this.applyHighlights = this.applyHighlights.bind(this);
this.textareaRef = React.createRef();
this.state = {value: 'This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.'};
}
applyHighlights(text){
return text
.replace(/n$/g, 'nn')
.replace(/[A-Z].*?b/g, '<mark>$&</mark>');
}
handleScroll(){
let scrollTop = this.textareaRef.current.scrollTop;
let scrollLeft = this.textareaRef.current.scrollLeft;
this.props.setScrollTop(scrollTop,scrollLeft);
}
handleChange(event){
let textareaValue = event.targrt.value;
this.setState({value: textareaValue});
let highlightedText = this.applyHighlights(textareaValue);
}
render(){
return (
<textarea ref={this.textareaRef} value={this.state.value} onChange={this.handleChange} onScroll={this.handleScroll}></textarea>
);
}
}
class Editor extends React.Component {
render(){
return (
<div>
<CodeTextArea />
<TogglePerspective />
</div>
);
}
}
ReactDOM.render(
<Editor />,
document.getElementById('root')
);
Here is the codeIo pen to my recreation. Just please tell me why the
highlight class div scrollTop attribute is not working.
I don't usually post long code here unless I'm truly frustrated so any help is appreciated.
javascript jquery html css reactjs
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
add a comment |
0
0
0
I have been stuck at this since today morning and I still can't figure out where did I go wrong. I wanted to highlight text inside a textarea input type. I know this isn't possible, but I found a clever solution to cheat the viewer into thinking that. Here is the link to the article and Here is the link to the codeio pen for the project.
I have been trying to recreate the same using react and normal javascript but the scrollTop property for div with className highlight just doesn't work. If someone could help me debug what I'm doing wrong, that would be wonderful!
class CodeTextArea extends React.Component {
constructor(props){
super(props);
this.state = {scrollTop: 0,
scrollLeft: 0
};
this.setScroll = this.setScroll.bind(this);
}
setScroll(top,left){
this.setState({scrollTop: top, scrollLeft: left});
}
render(){
return(
<div class="container">
<div class="backdrop">
<Highlight scrollTop={this.state.scrollTop} scrollLeft={this.state.scrollLeft}/>
</div>
<Textarea setScrollTop={this.setScroll}/>
</div>
);
}
}
class Highlight extends React.Component {
constructor(props){
super(props);
this.divRef = React.createRef();
}
componentDidUpdate(prevProps){
if (this.props.scrollTop !== prevProps.scrollTop) {
/*console.log(this.divRef.current);
console.log(this.props.scrollTop);
console.log(this.props.scrollLeft);*/
this.divRef.current.scrollTop = this.props.scrollTop;
}
}
render(){
return (
<div class="highlights" ref={this.divRef}><mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
);
}
}
class TogglePerspective extends React.Component {
constructor(props){
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.buttonRef = React.createRef();
}
clickHandler(){
}
render(){
return (
<button onClick={this.clickHandler} ref={this.buttonRef}>Toggle Perspective</button>
);
}
}
class Textarea extends React.Component {
constructor(props){
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleChange = this.handleChange.bind(this);
this.applyHighlights = this.applyHighlights.bind(this);
this.textareaRef = React.createRef();
this.state = {value: 'This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.'};
}
applyHighlights(text){
return text
.replace(/n$/g, 'nn')
.replace(/[A-Z].*?b/g, '<mark>$&</mark>');
}
handleScroll(){
let scrollTop = this.textareaRef.current.scrollTop;
let scrollLeft = this.textareaRef.current.scrollLeft;
this.props.setScrollTop(scrollTop,scrollLeft);
}
handleChange(event){
let textareaValue = event.targrt.value;
this.setState({value: textareaValue});
let highlightedText = this.applyHighlights(textareaValue);
}
render(){
return (
<textarea ref={this.textareaRef} value={this.state.value} onChange={this.handleChange} onScroll={this.handleScroll}></textarea>
);
}
}
class Editor extends React.Component {
render(){
return (
<div>
<CodeTextArea />
<TogglePerspective />
</div>
);
}
}
ReactDOM.render(
<Editor />,
document.getElementById('root')
);
Here is the codeIo pen to my recreation. Just please tell me why the
highlight class div scrollTop attribute is not working.
I don't usually post long code here unless I'm truly frustrated so any help is appreciated.
javascript jquery html css reactjs
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
I have been stuck at this since today morning and I still can't figure out where did I go wrong. I wanted to highlight text inside a textarea input type. I know this isn't possible, but I found a clever solution to cheat the viewer into thinking that. Here is the link to the article and Here is the link to the codeio pen for the project.
I have been trying to recreate the same using react and normal javascript but the scrollTop property for div with className highlight just doesn't work. If someone could help me debug what I'm doing wrong, that would be wonderful!
class CodeTextArea extends React.Component {
constructor(props){
super(props);
this.state = {scrollTop: 0,
scrollLeft: 0
};
this.setScroll = this.setScroll.bind(this);
}
setScroll(top,left){
this.setState({scrollTop: top, scrollLeft: left});
}
render(){
return(
<div class="container">
<div class="backdrop">
<Highlight scrollTop={this.state.scrollTop} scrollLeft={this.state.scrollLeft}/>
</div>
<Textarea setScrollTop={this.setScroll}/>
</div>
);
}
}
class Highlight extends React.Component {
constructor(props){
super(props);
this.divRef = React.createRef();
}
componentDidUpdate(prevProps){
if (this.props.scrollTop !== prevProps.scrollTop) {
/*console.log(this.divRef.current);
console.log(this.props.scrollTop);
console.log(this.props.scrollLeft);*/
this.divRef.current.scrollTop = this.props.scrollTop;
}
}
render(){
return (
<div class="highlights" ref={this.divRef}><mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
);
}
}
class TogglePerspective extends React.Component {
constructor(props){
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.buttonRef = React.createRef();
}
clickHandler(){
}
render(){
return (
<button onClick={this.clickHandler} ref={this.buttonRef}>Toggle Perspective</button>
);
}
}
class Textarea extends React.Component {
constructor(props){
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleChange = this.handleChange.bind(this);
this.applyHighlights = this.applyHighlights.bind(this);
this.textareaRef = React.createRef();
this.state = {value: 'This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.'};
}
applyHighlights(text){
return text
.replace(/n$/g, 'nn')
.replace(/[A-Z].*?b/g, '<mark>$&</mark>');
}
handleScroll(){
let scrollTop = this.textareaRef.current.scrollTop;
let scrollLeft = this.textareaRef.current.scrollLeft;
this.props.setScrollTop(scrollTop,scrollLeft);
}
handleChange(event){
let textareaValue = event.targrt.value;
this.setState({value: textareaValue});
let highlightedText = this.applyHighlights(textareaValue);
}
render(){
return (
<textarea ref={this.textareaRef} value={this.state.value} onChange={this.handleChange} onScroll={this.handleScroll}></textarea>
);
}
}
class Editor extends React.Component {
render(){
return (
<div>
<CodeTextArea />
<TogglePerspective />
</div>
);
}
}
ReactDOM.render(
<Editor />,
document.getElementById('root')
);
Here is the codeIo pen to my recreation. Just please tell me why the
highlight class div scrollTop attribute is not working.
I don't usually post long code here unless I'm truly frustrated so any help is appreciated.
javascript jquery html css reactjs
javascript jquery html css reactjs
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 18:05
anwesh mohapatraanwesh mohapatra
346
346
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Looks like the scrollTop property is being set on div.highlights when it should be set on div.backdrop.
Move div.backdrop into the Highlight Component and put the ref on that element:
<div class="backdrop" ref={this.divRef}>
<div class="highlights">
<mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>.
Alright, that's a lie. You can't actually render markup inside a textarea. However, you can
fake it by carefully positioning a div behind the textarea and adding your highlight markup there.
JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely.
Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
I don't know who you are, but I will find you and I will hug you :) Man it feels so embarrassing to have such a silly mistake. And was stuck on this for the entire day!!!!! You solved a big problem for me! Thank you so much!!!!!!!!!!!!!!!!!!
– anwesh mohapatra
Nov 12 '18 at 18:53
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267739%2freact-setting-scrolltop-on-div-doesnt-work-in-a-specific-case%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Looks like the scrollTop property is being set on div.highlights when it should be set on div.backdrop.
Move div.backdrop into the Highlight Component and put the ref on that element:
<div class="backdrop" ref={this.divRef}>
<div class="highlights">
<mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>.
Alright, that's a lie. You can't actually render markup inside a textarea. However, you can
fake it by carefully positioning a div behind the textarea and adding your highlight markup there.
JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely.
Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
I don't know who you are, but I will find you and I will hug you :) Man it feels so embarrassing to have such a silly mistake. And was stuck on this for the entire day!!!!! You solved a big problem for me! Thank you so much!!!!!!!!!!!!!!!!!!
– anwesh mohapatra
Nov 12 '18 at 18:53
add a comment |
1
Looks like the scrollTop property is being set on div.highlights when it should be set on div.backdrop.
Move div.backdrop into the Highlight Component and put the ref on that element:
<div class="backdrop" ref={this.divRef}>
<div class="highlights">
<mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>.
Alright, that's a lie. You can't actually render markup inside a textarea. However, you can
fake it by carefully positioning a div behind the textarea and adding your highlight markup there.
JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely.
Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
I don't know who you are, but I will find you and I will hug you :) Man it feels so embarrassing to have such a silly mistake. And was stuck on this for the entire day!!!!! You solved a big problem for me! Thank you so much!!!!!!!!!!!!!!!!!!
– anwesh mohapatra
Nov 12 '18 at 18:53
add a comment |
1
1
1
Looks like the scrollTop property is being set on div.highlights when it should be set on div.backdrop.
Move div.backdrop into the Highlight Component and put the ref on that element:
<div class="backdrop" ref={this.divRef}>
<div class="highlights">
<mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>.
Alright, that's a lie. You can't actually render markup inside a textarea. However, you can
fake it by carefully positioning a div behind the textarea and adding your highlight markup there.
JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely.
Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
Looks like the scrollTop property is being set on div.highlights when it should be set on div.backdrop.
Move div.backdrop into the Highlight Component and put the ref on that element:
<div class="backdrop" ref={this.divRef}>
<div class="highlights">
<mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>.
Alright, that's a lie. You can't actually render markup inside a textarea. However, you can
fake it by carefully positioning a div behind the textarea and adding your highlight markup there.
JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely.
Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
answered Nov 12 '18 at 18:48
Alex KAlex K
977510
977510
I don't know who you are, but I will find you and I will hug you :) Man it feels so embarrassing to have such a silly mistake. And was stuck on this for the entire day!!!!! You solved a big problem for me! Thank you so much!!!!!!!!!!!!!!!!!!
– anwesh mohapatra
Nov 12 '18 at 18:53
add a comment |
I don't know who you are, but I will find you and I will hug you :) Man it feels so embarrassing to have such a silly mistake. And was stuck on this for the entire day!!!!! You solved a big problem for me! Thank you so much!!!!!!!!!!!!!!!!!!
– anwesh mohapatra
Nov 12 '18 at 18:53
I don't know who you are, but I will find you and I will hug you :) Man it feels so embarrassing to have such a silly mistake. And was stuck on this for the entire day!!!!! You solved a big problem for me! Thank you so much!!!!!!!!!!!!!!!!!!
– anwesh mohapatra
Nov 12 '18 at 18:53
I don't know who you are, but I will find you and I will hug you :) Man it feels so embarrassing to have such a silly mistake. And was stuck on this for the entire day!!!!! You solved a big problem for me! Thank you so much!!!!!!!!!!!!!!!!!!
– anwesh mohapatra
Nov 12 '18 at 18:53
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267739%2freact-setting-scrolltop-on-div-doesnt-work-in-a-specific-case%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
