Set textarea scroll from ReactJS statechange scrollTop in reactjsHow do I remove a property from a JavaScript object?Setting “checked” for a checkbox with jQuery?How to Check if element is visible after scrolling?Set a default parameter value for a JavaScript functionScroll to the top of the page using JavaScript/jQuery?Get selected text from a drop-down list (select box) using jQueryHow do I remove a particular element from an array in JavaScript?jQuery scroll to elementHow do I return the response from an asynchronous call?Correct modification of state arrays in ReactJS
Why do people keep referring to Leia as Princess Leia, even after the destruction of Alderaan?
Cops: The Hidden OEIS Substring
How to disable wifi in Raspberry Pi 4
Does the Dispel Magic spell work on the Mirror Image spell?
Professor falsely accusing me of cheating in a class he does not teach, two months after end of the class. What precautions should I take?
Why isn't pressure filtration popular compared to vacuum filtration?
Comparing two limsup's
Cubic programming and beyond?
How can an advanced civilization forget how to manufacture its technology?
If your plane is out-of-control, why does military training instruct releasing the joystick to neutralize controls?
What is this welding tool I found in my attic?
Supporting developers who insist on using their pet language
The monorail explodes before I can get on it
Why does Hellboy file down his horns?
<schwitz>, <zwinker> etc. Does German always use 2nd Person Singular Imperative verbs for emoticons? If so, why?
How does a Potion of Poison work?
Why do players in the past play much longer tournaments than today's top players?
Book where the stars go black due to aliens stopping human observation collapsing quantum possibilities
What do the horizontal lines in a P-V phase diagram mean?
For a hashing function like MD5, how similar can two plaintext strings be and still generate the same hash?
Managing and organizing the massively increased number of classes after switching to SOLID?
Extract an attribute value from XML
Does throwing a penny at a train stop the train?
Referring to different instances of the same character in time travel
Set textarea scroll from ReactJS state
change scrollTop in reactjsHow do I remove a property from a JavaScript object?Setting “checked” for a checkbox with jQuery?How to Check if element is visible after scrolling?Set a default parameter value for a JavaScript functionScroll to the top of the page using JavaScript/jQuery?Get selected text from a drop-down list (select box) using jQueryHow do I remove a particular element from an array in JavaScript?jQuery scroll to elementHow do I return the response from an asynchronous call?Correct modification of state arrays in ReactJS
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I'm trying to control the scroll position of a textarea using a React component's state, but it doesn't move when I call setState().
Here's an example where clicking on the link should scroll to the top of the textarea, but it doesn't move. Scrolling with the scroll bar can log the positions, and the field moves. Clicking on the link writes a message to the console, but the scroll position doesn't move. I based this approach on the controlled components described in the ReactJS documentation.
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
scrollTop=this.state.scrollTop
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>I can control the scroll position by using the ref and setting its scrollTop, but I want to control it through the component state or the component properties. (Eventually, I want to synchronize the scrolling of two textareas.) I also tried using the react-scroll-sync library, but it doesn't work well with table cells.
Here's an example that controls the position using the ref and its scrollTop:
class App extends React.Component
constructor(props)
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.refs.content.scrollTop = 0;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>javascript reactjs scrollbar
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
add a comment |
I'm trying to control the scroll position of a textarea using a React component's state, but it doesn't move when I call setState().
Here's an example where clicking on the link should scroll to the top of the textarea, but it doesn't move. Scrolling with the scroll bar can log the positions, and the field moves. Clicking on the link writes a message to the console, but the scroll position doesn't move. I based this approach on the controlled components described in the ReactJS documentation.
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
scrollTop=this.state.scrollTop
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>I can control the scroll position by using the ref and setting its scrollTop, but I want to control it through the component state or the component properties. (Eventually, I want to synchronize the scrolling of two textareas.) I also tried using the react-scroll-sync library, but it doesn't work well with table cells.
Here's an example that controls the position using the ref and its scrollTop:
class App extends React.Component
constructor(props)
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.refs.content.scrollTop = 0;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>javascript reactjs scrollbar
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
2
I do not believe that scrollTop is a valid HTML attribute. It seems like it is a DOM property with no corresponding HTML attribute, which is why it works when you use it as a property on a ref, but not when you use it to change the HTML attribute. Looking at the list of valid HTML attributes I do not see it, developer.mozilla.org/en-US/docs/Web/HTML/Attributes. I know a lot of times attributes have 1:1 mappings to properties but this does not seem to be the case with scrollTop.
– Tommy May
Mar 26 at 3:58
add a comment |
I'm trying to control the scroll position of a textarea using a React component's state, but it doesn't move when I call setState().
Here's an example where clicking on the link should scroll to the top of the textarea, but it doesn't move. Scrolling with the scroll bar can log the positions, and the field moves. Clicking on the link writes a message to the console, but the scroll position doesn't move. I based this approach on the controlled components described in the ReactJS documentation.
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
scrollTop=this.state.scrollTop
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>I can control the scroll position by using the ref and setting its scrollTop, but I want to control it through the component state or the component properties. (Eventually, I want to synchronize the scrolling of two textareas.) I also tried using the react-scroll-sync library, but it doesn't work well with table cells.
Here's an example that controls the position using the ref and its scrollTop:
class App extends React.Component
constructor(props)
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.refs.content.scrollTop = 0;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>javascript reactjs scrollbar
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
I'm trying to control the scroll position of a textarea using a React component's state, but it doesn't move when I call setState().
Here's an example where clicking on the link should scroll to the top of the textarea, but it doesn't move. Scrolling with the scroll bar can log the positions, and the field moves. Clicking on the link writes a message to the console, but the scroll position doesn't move. I based this approach on the controlled components described in the ReactJS documentation.
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
scrollTop=this.state.scrollTop
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>I can control the scroll position by using the ref and setting its scrollTop, but I want to control it through the component state or the component properties. (Eventually, I want to synchronize the scrolling of two textareas.) I also tried using the react-scroll-sync library, but it doesn't work well with table cells.
Here's an example that controls the position using the ref and its scrollTop:
class App extends React.Component
constructor(props)
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.refs.content.scrollTop = 0;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
scrollTop=this.state.scrollTop
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
scrollTop=this.state.scrollTop
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>class App extends React.Component
constructor(props)
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.refs.content.scrollTop = 0;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>class App extends React.Component
constructor(props)
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.refs.content.scrollTop;
console.log(scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.refs.content.scrollTop = 0;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref="content"
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>javascript reactjs scrollbar
javascript reactjs scrollbar
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
edited Mar 27 at 4:45
Don Kirkby
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
asked Mar 26 at 3:40
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
29.6k13 gold badges138 silver badges212 bronze badges
2
I do not believe that scrollTop is a valid HTML attribute. It seems like it is a DOM property with no corresponding HTML attribute, which is why it works when you use it as a property on a ref, but not when you use it to change the HTML attribute. Looking at the list of valid HTML attributes I do not see it, developer.mozilla.org/en-US/docs/Web/HTML/Attributes. I know a lot of times attributes have 1:1 mappings to properties but this does not seem to be the case with scrollTop.
– Tommy May
Mar 26 at 3:58
add a comment |
2
I do not believe that scrollTop is a valid HTML attribute. It seems like it is a DOM property with no corresponding HTML attribute, which is why it works when you use it as a property on a ref, but not when you use it to change the HTML attribute. Looking at the list of valid HTML attributes I do not see it, developer.mozilla.org/en-US/docs/Web/HTML/Attributes. I know a lot of times attributes have 1:1 mappings to properties but this does not seem to be the case with scrollTop.
– Tommy May
Mar 26 at 3:58
2
2
I do not believe that scrollTop is a valid HTML attribute. It seems like it is a DOM property with no corresponding HTML attribute, which is why it works when you use it as a property on a ref, but not when you use it to change the HTML attribute. Looking at the list of valid HTML attributes I do not see it, developer.mozilla.org/en-US/docs/Web/HTML/Attributes. I know a lot of times attributes have 1:1 mappings to properties but this does not seem to be the case with scrollTop.
– Tommy May
Mar 26 at 3:58
I do not believe that scrollTop is a valid HTML attribute. It seems like it is a DOM property with no corresponding HTML attribute, which is why it works when you use it as a property on a ref, but not when you use it to change the HTML attribute. Looking at the list of valid HTML attributes I do not see it, developer.mozilla.org/en-US/docs/Web/HTML/Attributes. I know a lot of times attributes have 1:1 mappings to properties but this does not seem to be the case with scrollTop.
– Tommy May
Mar 26 at 3:58
add a comment |
1 Answer
1
active
oldest
votes
Tommy May explained in a comment that scrollTop isn't an HTML attribute, so I can't link it directly to the component state or properties. However, I found that the componentDidUpdate() method can be used to handle changes to the state or properties.
Here's an updated example that uses componentDidUpdate():
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.content = React.createRef();
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.content.current.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
componentDidUpdate()
this.content.current.scrollTop = this.state.scrollTop;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref=this.content
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>This isn't particularly useful in this example, but it is useful when you want to use properties instead of local state, as in this answer I posted for my original goal of synchronized scrolling.
answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
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%2f55349521%2fset-textarea-scroll-from-reactjs-state%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
Tommy May explained in a comment that scrollTop isn't an HTML attribute, so I can't link it directly to the component state or properties. However, I found that the componentDidUpdate() method can be used to handle changes to the state or properties.
Here's an updated example that uses componentDidUpdate():
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.content = React.createRef();
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.content.current.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
componentDidUpdate()
this.content.current.scrollTop = this.state.scrollTop;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref=this.content
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>This isn't particularly useful in this example, but it is useful when you want to use properties instead of local state, as in this answer I posted for my original goal of synchronized scrolling.
answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
add a comment |
Tommy May explained in a comment that scrollTop isn't an HTML attribute, so I can't link it directly to the component state or properties. However, I found that the componentDidUpdate() method can be used to handle changes to the state or properties.
Here's an updated example that uses componentDidUpdate():
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.content = React.createRef();
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.content.current.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
componentDidUpdate()
this.content.current.scrollTop = this.state.scrollTop;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref=this.content
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>This isn't particularly useful in this example, but it is useful when you want to use properties instead of local state, as in this answer I posted for my original goal of synchronized scrolling.
answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
add a comment |
Tommy May explained in a comment that scrollTop isn't an HTML attribute, so I can't link it directly to the component state or properties. However, I found that the componentDidUpdate() method can be used to handle changes to the state or properties.
Here's an updated example that uses componentDidUpdate():
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.content = React.createRef();
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.content.current.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
componentDidUpdate()
this.content.current.scrollTop = this.state.scrollTop;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref=this.content
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>This isn't particularly useful in this example, but it is useful when you want to use properties instead of local state, as in this answer I posted for my original goal of synchronized scrolling.
answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
Tommy May explained in a comment that scrollTop isn't an HTML attribute, so I can't link it directly to the component state or properties. However, I found that the componentDidUpdate() method can be used to handle changes to the state or properties.
Here's an updated example that uses componentDidUpdate():
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.content = React.createRef();
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.content.current.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
componentDidUpdate()
this.content.current.scrollTop = this.state.scrollTop;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref=this.content
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>This isn't particularly useful in this example, but it is useful when you want to use properties instead of local state, as in this answer I posted for my original goal of synchronized scrolling.
class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.content = React.createRef();
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.content.current.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
componentDidUpdate()
this.content.current.scrollTop = this.state.scrollTop;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref=this.content
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>class App extends React.Component
constructor(props)
super(props);
this.state = scrollTop: 0;
this.content = React.createRef();
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
handleScroll()
let scrollTop = this.content.current.scrollTop;
console.log(scrollTop);
this.setState(scrollTop: scrollTop);
handleClick(e)
e.preventDefault();
console.log('Clicked.');
this.setState(scrollTop: 0);
componentDidUpdate()
this.content.current.scrollTop = this.state.scrollTop;
render()
let text = 'annbnncnndnnennfnng';
return <p><textarea
ref=this.content
value=text
rows="10"
cols="30"
onScroll=this.handleScroll/>
<a href="#" onClick=this.handleClick>
Scroll to top
</a></p>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);.as-console-wrapper max-height: 10% !important; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
edited Mar 27 at 4:47
answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
answered Mar 26 at 4:46
Don KirkbyDon Kirkby
29.6k13 gold badges138 silver badges212 bronze badges
29.6k13 gold badges138 silver badges212 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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.
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%2f55349521%2fset-textarea-scroll-from-reactjs-state%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
2
I do not believe that scrollTop is a valid HTML attribute. It seems like it is a DOM property with no corresponding HTML attribute, which is why it works when you use it as a property on a ref, but not when you use it to change the HTML attribute. Looking at the list of valid HTML attributes I do not see it, developer.mozilla.org/en-US/docs/Web/HTML/Attributes. I know a lot of times attributes have 1:1 mappings to properties but this does not seem to be the case with scrollTop.
– Tommy May
Mar 26 at 3:58