Reports

Here is javascript code that gets the job done, based on kikon's jsfiddle provided in that members' comment which in turn was inspired by parts of masoudiofficial answer (see my reply comment why it couldn't be accepted). According to kikon, he won't post an answer not 100% his, but since his jsfiddle comprises sought code logic of his making, I'll "answer" for all here and give credit to both members for sharing their time and knowledge.

Code below is the javascript part taken from an amended jsfiddle that can be found here. In the jsfiddle you can also access the HTML and CSS which are self-explanatory.

const parentElement = document.getElementById('parentElement'),
    sixPackFirstElement = document.querySelector('#parentElement > div:nth-of-type(2)'),
    sixPackLastElement = document.querySelector('#parentElement > div:nth-of-type(7)'),
    sixPackTop = sixPackFirstElement.offsetTop,
    sixPackBottom = sixPackLastElement.offsetTop + sixPackLastElement.offsetHeight,

    // yScrollOffset = sixPackTop, // to attempt to position the top of the 6pack at the cursor
    yScrollOffset = (sixPackTop + sixPackBottom) / 2, // to attempt to position the center of the 6pack at the cursor
    yScrollMin = sixPackBottom - parentElement.offsetHeight;

parentElement.addEventListener('mouseenter', (event) => {

    const yScrollSixPackTop = yScrollOffset - event.offsetY;

    // or, using event.clientY:
    //const yScrollSixPackTop = yScrollOffset + parentElement.getBoundingClientRect().y - event.clientY;

    parentElement.scrollTop = Math.min(Math.max(yScrollMin, yScrollSixPackTop), sixPackTop);

});

Requirement:

The goal is for the "parent div to dynamically scroll the (child divs) to the exact location where my mouse enters the parent div via mouseenter event". Let's expose the shared logic and result:

Logic:

const parentElement comprises retrieval of a specific HTML element from the Document Object Model (DOM), assigned as a constant variable, which becomes the parent container in this case;

const sixPackFirstElement, const sixPackLastElement, const sixPackTop, const sixPackBottom, const yScrollOffset and const yScrollMin respectively, comprise two child elements and their combined calculated offsets used to fulfill logic requirement;

parentElement.addEventListener('mouseenter', (event) => { is the standard JavaScript method used to register an event handler to a specific element. In our case, mouseenter is the event we are listening for, with the help of an arrow function ((event) => { ... }) that serves as the event handler;

const yScrollSixPackTop serves to use children middle-height based on the combination of children heights divided by 2 (yScrollOffset), minus the mouse pointer offset which is "the Y coordinate of the mouse pointer between that event and the padding edge of the target node." (See MDN for specifics);

Result:

parentElement.scrollTop equals the math leading to expected result. Math.min(...) "is often used to clip a value so that it is always less than or equal to a boundary." (See MDN for specifics), while Math.max(...) "returns the largest of the numbers given as input parameters." (See MDN for specifics).

Therefore, the expression parentElement.scrollTop = Math.min(Math.max(yScrollMin, yScrollSixPackTop), sixPackTop) ensures that the targeted children will be scrolled and positioned - according to the middle-height of their combined heights - vis-à-vis the position of mouse pointer once it enters the parent container via mouseenter event.

Thanks for all who have contributed and keep contributing to SO.

79749748