Is it possible to replace 's native scrollbar with Scrollbars ?</p> </div> <div> <span class="badge badge-primary">help wanted</span> <div class="float-right"> <a class="text-muted" href="https://www.github.com/malte-wessel/react-custom-scrollbars/issues/121" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/10911028?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>raphaelhovsepyan</strong> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div id="ph-above-best-comment"> </div> </div> <div class="col-12 mb-4 best-comment"> <div> <h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2> </div> <div class="card card-custom border-lg-success mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@raphaelhovsepyan</strong> I've recently accomplished this in a VERY hack-y, cringe-worthy way. </p> <ol> <li>I define a "textarea_height" property to the component</li> <li>I set the inline style of the height of the textarea equal to the property textarea_height</li> <li>I use the onFocus method to set the initial value of textarea_height textarea by passing in the scrollHeight<br /> <ul><br /> <li>Alternatively, you can use the parameter "e" ("e", "event", or whatever you use) without passing in any parameters, then use e.target.scrollHeight</li><br /> </ul></li> <li>I use the onChange method to update the textarea_height value</li> </ol> <p>The best part? This method also works if you practice functional programming (with Redux)<br /> You can see how I achieved this here: <a rel="nofollow noopener" target="_blank" href="https://github.com/twaffl3s/daily-todo/blob/master/src/containers/list-item.js">https://github.com/twaffl3s/daily-todo/blob/master/src/containers/list-item.js</a></p> <ul> <li>Note: onFocus works with adding the attribute autoFocus as well</li> </ul> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/9656794?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>internette</strong> <span class="text-muted ml-1">on 17 May 2017</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 10 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@raphaelhovsepyan</strong> I think it would be easier to just try it out ?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/7712869?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="edi picture"> <strong>edi</strong> <span class="text-muted ml-1">on 21 Feb 2017</span> </div> <div class="col text-right"> 😕<span class="ml-2 mr-3">6</span> 👎<span class="ml-2 mr-3">4</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@EduardJS</strong> Of course I tried!<br /> Just want to confirm that it's not working..</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/10911028?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="raphaelhovsepyan picture"> <strong>raphaelhovsepyan</strong> <span class="text-muted ml-1">on 21 Feb 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@raphaelhovsepyan</strong> Well, the answer in that case is no. This component wraps up your element in order to do it's job. And with <code>textarea</code>, though it can be tweaked, it is not desirable.</p> <p>Why not using <code>contentEditable</code> ( which can be an editable <code>div</code> ), listen to <code>onInput</code>, and trigger <code>scrollToBottom()</code> ?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/7712869?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="edi picture"> <strong>edi</strong> <span class="text-muted ml-1">on 21 Feb 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@EduardJS</strong> it's impossible to listen <code>onChange</code> on <code>contentEditable</code> div, I need <strong>controlled</strong> component in my case. There are tons of issues with contentEditable (https://github.com/facebook/react/issues/2047).<br /> Thanks for answer!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/10911028?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="raphaelhovsepyan picture"> <strong>raphaelhovsepyan</strong> <span class="text-muted ml-1">on 21 Feb 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@raphaelhovsepyan</strong> I edited my answer ( <code>onChange -> onInput</code> ) right after replying. You probably read the email.</p> <p>I have used <code>contentEditable</code> in production with no issues for more than half a year. There is a repo <strong><a rel="nofollow noopener" target="_blank" href="https://github.com/lovasoa/react-contenteditable">here</a></strong> to ease up the issues you linked. I gave it a try few weeks ago, it has it's own issues, but most of them are fixed. I wasn't lucky enough to find it while I was working on my own. </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/7712869?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="edi picture"> <strong>edi</strong> <span class="text-muted ml-1">on 21 Feb 2017</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@EduardJS</strong> thanks, will try it out!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/10911028?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="raphaelhovsepyan picture"> <strong>raphaelhovsepyan</strong> <span class="text-muted ml-1">on 21 Feb 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@raphaelhovsepyan</strong> I've recently accomplished this in a VERY hack-y, cringe-worthy way. </p> <ol> <li>I define a "textarea_height" property to the component</li> <li>I set the inline style of the height of the textarea equal to the property textarea_height</li> <li>I use the onFocus method to set the initial value of textarea_height textarea by passing in the scrollHeight<br /> <ul><br /> <li>Alternatively, you can use the parameter "e" ("e", "event", or whatever you use) without passing in any parameters, then use e.target.scrollHeight</li><br /> </ul></li> <li>I use the onChange method to update the textarea_height value</li> </ol> <p>The best part? This method also works if you practice functional programming (with Redux)<br /> You can see how I achieved this here: <a rel="nofollow noopener" target="_blank" href="https://github.com/twaffl3s/daily-todo/blob/master/src/containers/list-item.js">https://github.com/twaffl3s/daily-todo/blob/master/src/containers/list-item.js</a></p> <ul> <li>Note: onFocus works with adding the attribute autoFocus as well</li> </ul> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/9656794?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="internette picture"> <strong>internette</strong> <span class="text-muted ml-1">on 17 May 2017</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@internette</strong> thanks for your solution! It worked like a charm for me.</p> <p>I posted my own implementation here: <a rel="nofollow noopener" target="_blank" href="https://jsbin.com/qequnuzixe/edit?html">https://jsbin.com/qequnuzixe/edit?html</a>,css,js,output (maybe it will help someone else)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1748823?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Sacret picture"> <strong>Sacret</strong> <span class="text-muted ml-1">on 24 Jan 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hi, I took <strong>@Sacret</strong> solution and improved it - the scrollbar should disappear then deleting lines or text.<br /> <a rel="nofollow noopener" target="_blank" href="https://jsbin.com/kogasalomi/1/edit?html">https://jsbin.com/kogasalomi/1/edit?html</a>,css,js,output<br /> hope someone enjoys this also...</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1895435?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="adimachmali picture"> <strong>adimachmali</strong> <span class="text-muted ml-1">on 15 Jul 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Some CSS alternative: <a rel="nofollow noopener" target="_blank" href="https://codepen.io/devstreak/pen/dMYgeO">https://codepen.io/devstreak/pen/dMYgeO</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/19911335?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="dimakrsna picture"> <strong>dimakrsna</strong> <span class="text-muted ml-1">on 24 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(206437648, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(206437648, 1);" onclick="rate(206437648, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(206437648, 2);" onclick="rate(206437648, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(206437648, 3);" onclick="rate(206437648, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(206437648, 4);" onclick="rate(206437648, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(206437648, 5);" onclick="rate(206437648, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/react-custom-scrollbars/113132736/prevent-nested-scrollbar-from-scrolling-document">Prevent nested scrollbar from scrolling document</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/665885?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="bunkat picture"> <strong class="pr-1" dir="ltr">bunkat</strong> 路 <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-custom-scrollbars/249101937/change-color-of-scrollbar">Change color of scrollbar?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/1342709?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="webchaz picture"> <strong class="pr-1" dir="ltr">webchaz</strong> 路 <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-custom-scrollbars/243182180/access-to-ref">access to ref</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/19375012?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="mhemrg picture"> <strong class="pr-1" dir="ltr">mhemrg</strong> 路 <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-custom-scrollbars/553628820/scrollbar-is-not-working-in-next-js">Scrollbar is not working in Next.js</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/24364783?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="anupmishra203 picture"> <strong class="pr-1" dir="ltr">anupmishra203</strong> 路 <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-custom-scrollbars/175425909/scrollbar-will-hidden-in-macos-safari-sometimes">scrollbar will hidden in MacOS Safari sometimes</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/4727090?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="hank7444 picture"> <strong class="pr-1" dir="ltr">hank7444</strong> 路 <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/malte-wessel/react-custom-scrollbars/issues/121" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> 漏 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>