React : setting scrollTop property of div doesn't work
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 mohapatra
346
add a comment |
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 mohapatra
346
add a comment |
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 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 mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatra
346
asked Nov 12 '18 at 15:05
anwesh mohapatra
346
346
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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
Tholle
33.8k53760
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 |
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 Paraschiv
8,52432741
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
});
}
});
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
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
Tholle
33.8k53760
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 |
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
Tholle
33.8k53760
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 |
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
Tholle
33.8k53760
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
Tholle
33.8k53760
answered Nov 12 '18 at 15:16
Tholle
33.8k53760
answered Nov 12 '18 at 15:16
Tholle
33.8k53760
answered Nov 12 '18 at 15:16
Tholle
33.8k53760
33.8k53760
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 |
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 Paraschiv
8,52432741
add a comment |
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 Paraschiv
8,52432741
add a comment |
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 Paraschiv
8,52432741
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 Paraschiv
8,52432741
answered Nov 12 '18 at 15:10
Sergiu Paraschiv
8,52432741
answered Nov 12 '18 at 15:10
Sergiu Paraschiv
8,52432741
answered Nov 12 '18 at 15:10
Sergiu Paraschiv
8,52432741
8,52432741
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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
