Accordian-IntersectionObserberFlat-Working

5 corner cases in this problem. Working in flat case Issue with scroll hand over.. mabye add to parent item to forward scroll and then required to dedounce events.. as can still add duplicates...

by Wesley Oliver

HTML

<script src="https://use.fontawesome.com/02dcf8ce89.js"></script>

<script>

</script>

<style> 

div[class~=stackable-group] [class~=heading]
{
  background-color: yellow;
}

div[class~=stackable-group] [class~=stackable-group-preview]
{
  background-color: blue;
}

div.scrollable
{
  overflow:auto;width:100%;height:100%;
}
div.stackable 
{
  //position:relative;width:100%;height:100%;background-color:inherit;
}

div.stackable div.stackable-top
{  
  //position:absolute;top:0;z-index:1;width:90%;height:auto;background-color:#00FF00;
  top:0;width:90%;height:auto;background-color:#00FF00;
}

div.stackable div.stackable-bottom
{
  //position:absolute;bottom:0;z-index:1;width:90%;height:auto;background-color:#0000FF;
  bottom:0;height:auto;background-color:#0000FF;
}

.collapsible-show
{
  display:none;
}

</style>

<a onclick="alert('heading position' + document.getElementById('scrollable').scrollTop + ':' + + document.getElementById('Heading2').offsetTop);">Show Position</a>

<a onclick="document.getElementById('headingContent').style.display='none';alert('ok');">Display None</a>

<div style="width:200px;height:300px;background-color:#990000">
  <div class="stackable">    
    <div class="scrollable" id="scrollable">  
     <ul>
          <li class="previewItem">No GroupItem1</li>
          <li>No GroupItem2</li> 
          <li>No GroupItem3</li>
          <li>No GroupItem4</li>
          <li>No GroupItem5</li>
          <li>No GroupItem6</li>
           <li>No GroupItem4</li>
          <li>No GroupItem5</li>
          <li>No GroupItem6</li>
           <li>No GroupItem6</li>
           <li>No GroupItem4</li>
          <li>No GroupItem5</li>
          <li>No GroupItem6</li>
          <li>No GroupItem4</li>
          <li>No GroupItem5</li>
          <li>No GroupItem6</li>
           <li>No GroupItem6</li>
           <li>No GroupItem4</li>
          <li>No GroupItem5</li>
          <li>No GroupItem6</li>
        </ul>       
      <div class="stackable-group...

JavaScript

var stackables = document.getElementsByClassName("stackable");

for(var i = 0; i < stackables.length; i++)
{
	var stackable = stackables[i];  
  
  var scrollable = stackable.getElementsByClassName("scrollable")[0];
  
  initStackable(scrollable);  
}

function initStackable(stackableElement) {

	var stackable = stackableElement.parentElement;  
  
  stackable.addEventListener('mousewheel', (event)=>
    {
      stackableElement.scrollTop = scrollable.scrollTop - event.wheelDeltaY;
    }); 

  const stackTop = document.createElement('div');
  stackTop.setAttribute('class','stackable-top');
  stackTop.addEventListener('mousewheel', (event)=>
    {
      stackableElement.scrollTop = scrollable.scrollTop - event.wheelDeltaY;
    }); 
   
  stackable.insertBefore(stackTop, stackableElement);

	const stackBottom = document.createElement('div');
  stackBottom.setAttribute('class','stackable-bottom');
  stackBottom.addEventListener('mousewheel', (event)=>
    {
      stackableElement.scrollTop = scrollable.scrollTop - event.wheelDeltaY;
    }); 
      // stackBottom.innerHTML = "Tesitng";
  
  stackable.appendChild(stackBottom);
    
  var groups = stackableElement.getElementsByClassName('stackable-group');  
  
  

	

  var groupTargets = [];

  for (let iGroup = 0; iGroup < groups.length; iGroup++)
  {
    var groupItem = groups[iGroup];           
    var groupHeader = groupItem.getElementsByClassName('heading')[0];  

    groupTargets.push(groupHeader);
  }
  
  let initialize = false;


	const createObserver = () => {
  
  	let debounce = true;
  
  	const topStackHeight = stackTop.getBoundingClientRect().height;
    
    const bottomStackHeight = stackBottom.getBoundingClientRect().height;

    let options = {
      root: stackableElement,
     	//rootMargin: `-${topStackHeight}px 0px -${bottomStackHeight}px 0px`,
      threshold: [0,1]
    };
  
  	let dynamicProp = {
    	
    };
  

    const callBack = function(entries, observer) {

     if (debounce &&...