We Keep Coding

React scroll to ref with multiple scrollbars

I have a small problem that I can't figure out.
I have an element inside my page with a scrollbar. This means I got the main page scrollbar and a second scrollbar. I have a button inside that element that triggers a new div with some content inside of it. But that div is outside the view of the element so you need to scroll to see it. This is not really user friendly so I am trying to add a function that when you click on that button it scrolls to the new div.
Picture of element: https://imgur.com/8wIOTqo
button is the gold coloured one
The problem is that it is using the main page scrollbar and not the scrollbar of the element. Does anyone know how to fix this? Here is my code
// Function to open the element and scroll to the ref
function enableOtherAddressActive() {
secondDeliveryAddressRef.current.scrollIntoView();
setOtherAddress(true);
}
<div className="deliveryaddress__different">
{otherAddress ? (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={disableOtherAddressActive}>Afwijkend bezorgadres verwijderen</div>
) : (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={enableOtherAddressActive}>Afwijkend bezorgadres toevoegen</div>
)}
</div>
<div className="deliveryaddress__second" ref={secondDeliveryAddressRef}>
{otherAddress ? (
<div className="deliveryaddress__inner">
<h3 className="deliveryaddress__title">
Afwijkend bezorgadres toevoegen
</h3>
</div>
) : undefined}
</div>
</div>

One of the way to scroll to the element is assigning a id to the div and using scrollInto that
I have done in the codesandbox below refer it shows how to scroll into a particular element even if it is nested scrollbar
Code:
const handleScrollTo = () => {
setTimeout(() => {
document.getElementById(`element`) &&
document.getElementById(`element`).scrollIntoView({
behavior: "smooth",
block: "center"
});
}, 1000);
};

Javascript not activating

I have a script that is made to add .fix class to a header tag with #header-wrap id once the page is scrolled a certain amount, but for some reason nothing happens on scroll.
HTML:
<header id="header-wrap">
<div id="redline"></div>
<div id="velkommen"></div>
<div id="header">
<div id="indre">
<h1 id="logo">MCBERGBYS</h1>
</div>
</div>
</header>
<script>
var wrap = $("#header-wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 143) {
wrap.addClass("fix");
} else {
wrap.removeClass("fix");
}
});
</script>
I'm very new to javascipt so I bet something obvious is off. Any help is appreciated, thank you.

You need to bind your .on('scroll') event to the $(window), not to your #header-wrap element. This will check when the document is being scrolled up and down, as opposed to seeing when an individual element is being "scrolled" (like when you move up and down in a textarea).

$('form:not(.some-class)').keydown is still applying keydown event to .some-class

JQuery's ':not' selector is not preventing the intended-to-be-excluded class (which decorates an element) from firing the .keydown event. Why?
From the following code, when I press a key in the .newOwnerEntryInput field, I expect to see the alert for '1' only. But I see both alerts '1' and '2'.
Javascript:
$('.newOwnerEntryInput').keydown(function (event) {
alert('1');
});
// Prevent Enter from submitting form.
$('form:not(.newOwnerEntryInput)').keydown(function (event) {
alert('2');
});
HTML:
<li style="position: relative">
#Html.DropDownList("cftMemberID", null, String.Empty, new { #class = "actionOwnerDropDown hidden" })
<div class="newOwnerEntryDiv">
<input class="newOwnerEntryInput" />
<div class="float-right closeNewOwner">
<img src="~/Images/cancel_x.png" alt="close" />
</div>
</div>
</li>
I have tried a variety of quotes styles, with and without surrounding the excluded class with quotes, as well as adding 'input' after the class, as in $('form:not(.newOwnerEntryInput input)').keydown
Thanks!

Thanks for those who helped. I do need the form to fire for ALL types of input fields, not just those of type input. So that was out.
Here is what solved my problem:
$('form').keydown(function (event) {
if (! event.which.hasClass('.newOwnerEntryInput')) {
alert('2');
}
});
In this case, for my input of class .newOwnerEntryInput, if a key is pressed, it will NOT fire the event and push '2' out to the alert screen.
Again, thanks, it took a couple responses, all of which had a piece of the solution, for me to answer this myself. :)

Try this:
HTML:
<div>
<input class="newOwnerEntryInput" type="text"/><br />
<!-- I know you have MVC dropdown list, but I replaced it with a html textbox (for simple testing) -->
<input class="newOwnerEntryInput1" type="text"/>
</div>
JavaScript:
$('input.newOwnerEntryInput').keydown(function (e) {
alert('1');
});
$('input:not(.newOwnerEntryInput)').keydown(function (e) {
alert('2');
});
I checked with the documentation that in their example, I saw they had the element input followed by the function with the selector.
The documentation is available is here: jQuery :not()
I hope this helps!
Cheers!

Try this :
$('form input:not(.newOwnerEntryInput)').on('keydown',function (event)
{
alert('2');
});
http://jsfiddle.net/rzseLj27/

Javascript's getElementById and innerHTML Don't Work Indirectly

Here is my code:
<html>
<head>
<title>My Game Title Goes Here!</title>
<script type="text/javascript">
function startGame(){
document.getElementById("2").innerHTML = ('Testing!');
}
document.body.onload = keyListener(){
document.getElementById("1").onkeypress = startGame;
}
</script>
</head>
<body>
<div class="title" name="Game Title" id="0">Game Title</div>
<div tabindex="0" class="gamecontainer" name="Game Container" id="1">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>
</body>
</html>
I doesn't work like I expect it to (I'm using Google Chrome).
It only works if I run it directly, like this:
<div tabindex="0" class="gamecontainer" name="Game Container" id="1" onkeypress="document.getElementById('2').innerHTML = ('Testing!')">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>
I checked over my code tons of times and i cannot find any clear mistakes like typos or anything. If that is the problem then I am sorry to have wasted your time but this is realy buggin' me.

Element IDs can't start with a number, it's almost definitely contributing to your issue here. Change the IDs in both the HTML and JS to begin with a letter.
Second of all, the keyListener line should probably be something like this:
window.onload = function(){
document.getElementById("newId").onkeypress = startGame;
}

document.body doesn't have an onload property. It should be window.onload instead.
window.onload = function(){
document.getElementById("1").onkeypress = startGame;
}
DEMO: http://jsfiddle.net/9khng/

Change :
document.body.onload = keyListener(){
document.getElementById("1").onkeypress = startGame;
}
To:
document.body.onload = function(){
document.getElementById("1").onkeypress = startGame;
}
And, id shouldn't begin with a number as it's an invalid HTML.
Chrome seems to overcome this mistake, but it shouldn't be used.
And move the code to the the <body> tag or use window.onload
document.body doesn't exist above the <body>.

I think IDs can't start with a number.

Try fixing your "onkeypress" attribute. Your quotes are messed up.
onkeypress="document.getElementById('2').innerHTML = ('Testing!')"

Javascript change div content upon a click

I'm pulling a content from PHP array and I have a situation like this:
<div class="weight-display">
<span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc...
Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:
<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..
So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...
Thanks,
Peter

<style type="text/css">
/* Normal mode */
.weight-display div.edit {display:none}
/* Editor mode */
.weight-edit div.show {display:none}
</style>
<div class="weight-display">
<button onclick="toggle(this)">Edit this!</button>
<div class="edit"><input type="text" value="Test" /></div>
<div class="show">Test</div>
</div>
<script type="text/javascript">
function toggle(button)
{
// Change the button caption
button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
// Change the parent div's CSS class
var div = button.parentNode;
div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
}
</script>

What you suggest is basically correct. I would generate two div's one for display and one edit. The edit div will initially have display: none. When the Edit is clicked, hide the display div and show the edit div.

How about something like:
onClick event calls a function (EDITED to be a little smarter than my original brute force method):
function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
var topdiv = getRefToDiv( id_of_topdiv );
var bottomdiv = getRefToDiv( id_of_bottomdiv );
var temp = topdiv.style.zIndex;
topdiv = bottomdiv.style.zIndex;
bottomdiv = temp.style.zIndex;
}
Could that or similar work for you? Or am I missing some subtle yet crucial requirement?