React : setting scrollTop property of div doesn't work
5
I am new to react and currently I am trying to set the scrollTop property of a div to a desired number. Unfortunately, it doesn't work for me. See the code below:
class Testdiv extends React.Component
constructor(props)
super(props);
this.divRef = React.createRef();
componentDidMount()
this.divRef.current.scrollTop = 100;
render()
return (
<div className="testDiv" ref=this.divRef>
Hello World<br /><br /><br /><br />
Hello World!
</div>
);
ReactDOM.render(
<Testdiv />,
document.getElementById('root')
);
And the CSS:
.testDiv
height: 500px;
overflow: auto;
Here is the codeio pen for the respective code. P.S. I don't want to use Jquery. Thank you for the help.
javascript html css html5 reactjs
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
add a comment |
5
I am new to react and currently I am trying to set the scrollTop property of a div to a desired number. Unfortunately, it doesn't work for me. See the code below:
class Testdiv extends React.Component
constructor(props)
super(props);
this.divRef = React.createRef();
componentDidMount()
this.divRef.current.scrollTop = 100;
render()
return (
<div className="testDiv" ref=this.divRef>
Hello World<br /><br /><br /><br />
Hello World!
</div>
);
ReactDOM.render(
<Testdiv />,
document.getElementById('root')
);
And the CSS:
.testDiv
height: 500px;
overflow: auto;
Here is the codeio pen for the respective code. P.S. I don't want to use Jquery. Thank you for the help.
javascript html css html5 reactjs
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
add a comment |
5
5
5
I am new to react and currently I am trying to set the scrollTop property of a div to a desired number. Unfortunately, it doesn't work for me. See the code below:
class Testdiv extends React.Component
constructor(props)
super(props);
this.divRef = React.createRef();
componentDidMount()
this.divRef.current.scrollTop = 100;
render()
return (
<div className="testDiv" ref=this.divRef>
Hello World<br /><br /><br /><br />
Hello World!
</div>
);
ReactDOM.render(
<Testdiv />,
document.getElementById('root')
);
And the CSS:
.testDiv
height: 500px;
overflow: auto;
Here is the codeio pen for the respective code. P.S. I don't want to use Jquery. Thank you for the help.
javascript html css html5 reactjs
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
I am new to react and currently I am trying to set the scrollTop property of a div to a desired number. Unfortunately, it doesn't work for me. See the code below:
class Testdiv extends React.Component
constructor(props)
super(props);
this.divRef = React.createRef();
componentDidMount()
this.divRef.current.scrollTop = 100;
render()
return (
<div className="testDiv" ref=this.divRef>
Hello World<br /><br /><br /><br />
Hello World!
</div>
);
ReactDOM.render(
<Testdiv />,
document.getElementById('root')
);
And the CSS:
.testDiv
height: 500px;
overflow: auto;
Here is the codeio pen for the respective code. P.S. I don't want to use Jquery. Thank you for the help.
javascript html css html5 reactjs
javascript html css html5 reactjs
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatraanwesh mohapatra
346
346
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
You have to make sure that the content of testDiv is higher than the container itself and set the overflow on the y axis to scroll.
Example
class Testdiv extends React.Component
divRef = React.createRef();
componentDidMount()
setTimeout(() =>
this.divRef.current.scrollTop = 1000;
, 1000);
render()
return (
<div style= height: 200, overflowY: "scroll" ref=this.divRef>
Hello World
<div style= height: 300 />
Hello World!
</div>
);
ReactDOM.render(<Testdiv />, document.getElementById("root"));<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>answered Nov 12 '18 at 15:16
TholleTholle
38k54263
thank you, it's working. But I don't understand what you mean by "content of testDiv is higher than the container itself". Isn't testDiv the container?
– anwesh mohapatra
Nov 12 '18 at 15:29
@anweshmohapatra Great! ThetestDivcontainer in my example has a height of 200px, but the children of thetestDivcontainer has a higher total height than that since one the the children is 300px in height.
– Tholle
Nov 12 '18 at 15:31
add a comment |
2
This is a css/overflow issue, not a JS/React one. The problem is that the testDiv is not high enough for anything to happen. Set height: 30px on it and you'll see the difference: https://codepen.io/anon/pen/ZmBydZ
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
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%2f53264924%2freact-setting-scrolltop-property-of-div-doesnt-work%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You have to make sure that the content of testDiv is higher than the container itself and set the overflow on the y axis to scroll.
Example
class Testdiv extends React.Component
divRef = React.createRef();
componentDidMount()
setTimeout(() =>
this.divRef.current.scrollTop = 1000;
, 1000);
render()
return (
<div style= height: 200, overflowY: "scroll" ref=this.divRef>
Hello World
<div style= height: 300 />
Hello World!
</div>
);
ReactDOM.render(<Testdiv />, document.getElementById("root"));<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>answered Nov 12 '18 at 15:16
TholleTholle
38k54263
thank you, it's working. But I don't understand what you mean by "content of testDiv is higher than the container itself". Isn't testDiv the container?
– anwesh mohapatra
Nov 12 '18 at 15:29
@anweshmohapatra Great! ThetestDivcontainer in my example has a height of 200px, but the children of thetestDivcontainer has a higher total height than that since one the the children is 300px in height.
– Tholle
Nov 12 '18 at 15:31
add a comment |
1
You have to make sure that the content of testDiv is higher than the container itself and set the overflow on the y axis to scroll.
Example
class Testdiv extends React.Component
divRef = React.createRef();
componentDidMount()
setTimeout(() =>
this.divRef.current.scrollTop = 1000;
, 1000);
render()
return (
<div style= height: 200, overflowY: "scroll" ref=this.divRef>
Hello World
<div style= height: 300 />
Hello World!
</div>
);
ReactDOM.render(<Testdiv />, document.getElementById("root"));<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>answered Nov 12 '18 at 15:16
TholleTholle
38k54263
thank you, it's working. But I don't understand what you mean by "content of testDiv is higher than the container itself". Isn't testDiv the container?
– anwesh mohapatra
Nov 12 '18 at 15:29
@anweshmohapatra Great! ThetestDivcontainer in my example has a height of 200px, but the children of thetestDivcontainer has a higher total height than that since one the the children is 300px in height.
– Tholle
Nov 12 '18 at 15:31
add a comment |
1
1
1
You have to make sure that the content of testDiv is higher than the container itself and set the overflow on the y axis to scroll.
Example
class Testdiv extends React.Component
divRef = React.createRef();
componentDidMount()
setTimeout(() =>
this.divRef.current.scrollTop = 1000;
, 1000);
render()
return (
<div style= height: 200, overflowY: "scroll" ref=this.divRef>
Hello World
<div style= height: 300 />
Hello World!
</div>
);
ReactDOM.render(<Testdiv />, document.getElementById("root"));<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>answered Nov 12 '18 at 15:16
TholleTholle
38k54263
You have to make sure that the content of testDiv is higher than the container itself and set the overflow on the y axis to scroll.
Example
class Testdiv extends React.Component
divRef = React.createRef();
componentDidMount()
setTimeout(() =>
this.divRef.current.scrollTop = 1000;
, 1000);
render()
return (
<div style= height: 200, overflowY: "scroll" ref=this.divRef>
Hello World
<div style= height: 300 />
Hello World!
</div>
);
ReactDOM.render(<Testdiv />, document.getElementById("root"));<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>class Testdiv extends React.Component
divRef = React.createRef();
componentDidMount()
setTimeout(() =>
this.divRef.current.scrollTop = 1000;
, 1000);
render()
return (
<div style= height: 200, overflowY: "scroll" ref=this.divRef>
Hello World
<div style= height: 300 />
Hello World!
</div>
);
ReactDOM.render(<Testdiv />, document.getElementById("root"));<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>class Testdiv extends React.Component
divRef = React.createRef();
componentDidMount()
setTimeout(() =>
this.divRef.current.scrollTop = 1000;
, 1000);
render()
return (
<div style= height: 200, overflowY: "scroll" ref=this.divRef>
Hello World
<div style= height: 300 />
Hello World!
</div>
);
ReactDOM.render(<Testdiv />, document.getElementById("root"));<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>answered Nov 12 '18 at 15:16
TholleTholle
38k54263
answered Nov 12 '18 at 15:16
TholleTholle
38k54263
answered Nov 12 '18 at 15:16
TholleTholle
38k54263
answered Nov 12 '18 at 15:16
TholleTholle
38k54263
38k54263
thank you, it's working. But I don't understand what you mean by "content of testDiv is higher than the container itself". Isn't testDiv the container?
– anwesh mohapatra
Nov 12 '18 at 15:29
@anweshmohapatra Great! ThetestDivcontainer in my example has a height of 200px, but the children of thetestDivcontainer has a higher total height than that since one the the children is 300px in height.
– Tholle
Nov 12 '18 at 15:31
add a comment |
thank you, it's working. But I don't understand what you mean by "content of testDiv is higher than the container itself". Isn't testDiv the container?
– anwesh mohapatra
Nov 12 '18 at 15:29
@anweshmohapatra Great! ThetestDivcontainer in my example has a height of 200px, but the children of thetestDivcontainer has a higher total height than that since one the the children is 300px in height.
– Tholle
Nov 12 '18 at 15:31
thank you, it's working. But I don't understand what you mean by "content of testDiv is higher than the container itself". Isn't testDiv the container?
– anwesh mohapatra
Nov 12 '18 at 15:29
thank you, it's working. But I don't understand what you mean by "content of testDiv is higher than the container itself". Isn't testDiv the container?
– anwesh mohapatra
Nov 12 '18 at 15:29
@anweshmohapatra Great! The
testDiv container in my example has a height of 200px, but the children of the testDiv container has a higher total height than that since one the the children is 300px in height.– Tholle
Nov 12 '18 at 15:31
@anweshmohapatra Great! The
testDiv container in my example has a height of 200px, but the children of the testDiv container has a higher total height than that since one the the children is 300px in height.– Tholle
Nov 12 '18 at 15:31
add a comment |
2
This is a css/overflow issue, not a JS/React one. The problem is that the testDiv is not high enough for anything to happen. Set height: 30px on it and you'll see the difference: https://codepen.io/anon/pen/ZmBydZ
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
add a comment |
2
This is a css/overflow issue, not a JS/React one. The problem is that the testDiv is not high enough for anything to happen. Set height: 30px on it and you'll see the difference: https://codepen.io/anon/pen/ZmBydZ
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
add a comment |
2
2
2
This is a css/overflow issue, not a JS/React one. The problem is that the testDiv is not high enough for anything to happen. Set height: 30px on it and you'll see the difference: https://codepen.io/anon/pen/ZmBydZ
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
This is a css/overflow issue, not a JS/React one. The problem is that the testDiv is not high enough for anything to happen. Set height: 30px on it and you'll see the difference: https://codepen.io/anon/pen/ZmBydZ
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
answered Nov 12 '18 at 15:10
Sergiu ParaschivSergiu Paraschiv
8,67442841
8,67442841
add a comment |
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%2f53264924%2freact-setting-scrolltop-property-of-div-doesnt-work%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
