javascript - 将鼠标光标悬停在左列的滚动条上时保存右列的内容

Question

有一个页面，当您将鼠标光标悬停在左侧列上时，左侧列的菜单项的子项列表会显示在右侧部分。需要当鼠标光标悬停在滚动条的对应部分（对应左栏的菜单项）（元素边框）上时

显示右侧

对应的滚动条

对应部分滚动条-澄清截图

右边部分的内容没有改变。如何做到这一点？

let cataloglistbutton = document.querySelector('.catalogbutton');
let divmenuleft = document.querySelector('.CatalogMenuLeft');
let divmenusearch = document.querySelector('.CatalogMenuSearch');
let divmenuright = document.querySelector('.CatalogMenuRight');
let divfreespace = document.querySelector('.CatalogFreeSpace');

console.log('Before');
document.getElementById('dropdownwindow').style.position = "fixed";
document.getElementById('dropdownwindow').style.marginLeft = "0";
document.getElementById('dropdownwindow').style.marginTop = "0";
document.getElementById('dropdownwindow').style.display = "block";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight = "20%";
document.getElementById('dropdownwindow').style.width = "80%";
/*document.getElementById('dropdownwindowright').style.marginRight="20%";
document.getElementById('dropdownwindowright').style.marginLeft="20%";              
document.getElementById('dropdownwindowright').style.width="60%";               
*/
document.getElementById('dropdownwindowright').style.flex = "60%";
/*divfreespace.style.width="20%";
divmenuleft.style.display="block";
divmenuright.style.display="block";     divmenusearch.style.display="block";
divfreespace.style.display="block";*/
document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
/*
const menuelems=document.querySelectorAll('.menulistitem');
menuelems.forEach((menuelem) => { menuelem.addEventListener('mouseover', (event) => { event.target.style.cursor = "pointer";event.target.classList.add('menulistitem_selected')});
menuelem.addEventListener('mouseout', (event) => { event.target.style.cursor = "pointer"; event.target.classList.remove('menulistitem_selected')});             
});
*/

let idnumber = 0;
const smartphonesandgadgets = document.querySelector('#smartphonesandgadgets');
smartphonesandgadgets.addEventListener('mouseover', (event) => {
  /*document.querySelector('#CatalogMenuRight').innerHTML="";*/
  event.target.style.cursor = "pointer";
  event.target.classList.add('menulistitem_selected');
  fetch('../html/smartphonesandgadgets.html')
    .then(r => r.text())
    .then(data => {
      document.querySelector('#CatalogMenuRight').innerHTML += data
    });
})


document.querySelector('.flexcontent').addEventListener('mousemove', function(e) {
  console.log('offsetWidth ' + document.querySelector('#smartphonesandgadgets').offsetWidth);
  console.log('offsetTop ' + document.querySelector('#smartphonesandgadgets').offsetTop);
  console.log('offsetHeight ' + document.querySelector('#smartphonesandgadgets').offsetHeight);
  console.log('offsetX ' + e.offsetX);
  console.log('offsetY ' + e.offsetY);
  let rightparttext = document.querySelector('#CatalogMenuRight').innerHTML;
  if ((document.querySelector('#smartphonesandgadgets').offsetWidth < e.offsetX) && (document.querySelector('#smartphonesandgadgets').offsetWidth + 5 >= e.offsetX) && (0 <= e.offsetY) && (document.querySelector('#smartphonesandgadgets').offsetHeight >= e.offsetY)) {
    document.querySelector('#CatalogMenuRight').innerHTML = "";
    document.querySelector('#CatalogMenuRight').innerHTML = rightparttext;
  }
})


smartphonesandgadgets.addEventListener('mouseout', (event) => {
  event.target.style.cursor = "pointer";
  event.target.classList.remove('menulistitem_selected'); /*document.querySelector('#CatalogMenuRight').innerHTML="";*/
});

/*const simpleBar = new SimpleBar(document.querySelector('.windowmenulist'));*/
/*simpleBar.style.visibility="visible";*/
/*
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical').style.visibility="visible";
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.height="100%";
document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.display="block";
*/
/*document.getElementById('dropdownwindow').style.position="absolute";*/
/*document.getElementById('dropdownwindow').style.marginBottom="0px";
document.getElementById('dropdownwindow').style.paddingBottom="0px";*/

console.log('After');

let closebutton = document.querySelector('.close');
/*closebutton.style.position="relative";*/
closebutton.onclick = function() {
  document.getElementById('dropdownwindow').style.display = "none";
}

#menulist {
  flex: 1;
  overflow: auto;
  height: 400px;
}

.menulistitem {
  padding-top: 5px;
  padding-bottom: 5px;
}


/* Works on Firefox */

#menulist {
  scrollbar-width: auto;
  scrollbar-color: #b8b8bc #f5f5f6;
  /*overflow-y: scroll;*/
  /*height: 200px;*/
}


/* Works on Chrome, Edge, and Safari */

#menulist::-webkit-scrollbar-button {
  display: none;
}

#menulist::-webkit-scrollbar {
  width: 5px;
}

#menulist::-webkit-scrollbar-track {
  background: #f5f5f6;
}

#menulist::-webkit-scrollbar-thumb {
  background: #b8b8bc;
  border-radius: 3px;
  border: 0px solid #f5f5f6;
}

#menulist::-webkit-scrollbar-thumb:hover {
  background: #b8b8bc;
}

.close {
  margin-top: -14px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 24px;
  cursor: pointer;
  display: inline-block;
}

.CatalogMenuRight {
  /*flex: 1;*/
  overflow: auto;
  height: 400px;
}


/*.menulistitem {
    padding-top: 5px;
    padding-bottom: 5px;
}
*/


/* Works on Firefox */

.CatalogMenuRight {
  scrollbar-width: auto;
  scrollbar-color: #b8b8bc #f5f5f6;
  /*overflow-y: scroll;*/
  /*height: 200px;*/
}


/* Works on Chrome, Edge, and Safari */

.CatalogMenuRight::-webkit-scrollbar-button {
  display: none;
}

.CatalogMenuRight::-webkit-scrollbar {
  width: 5px;
}

.CatalogMenuRight::-webkit-scrollbar-track {
  background: #f5f5f6;
}

.CatalogMenuRight::-webkit-scrollbar-thumb {
  background: #b8b8bc;
  border-radius: 2.5px;
  border: 0px solid #f5f5f6;
}

.CatalogMenuRight::-webkit-scrollbar-thumb:hover {
  background: #b8b8bc;
}

#dropdownwindowright {
  width: 75%;
}

.CatalogMenuSearch #SearchBlock {
  /*border-bottom: 1px solid orange;*/
}

#SearchBlock {
  padding-top: 5px;
  /*padding-left: 25px;*/
  margin-left: 25px;
  margin-right: 50px;
  /*padding-right: 50px;*/
  display: flex;
  /*justify-content: flex-end;*/
  height: 35px;
  border-bottom: 1px solid #dfdfe1;
}

#SearchInputdiv {
  height: 100%;
  width: calc(100%-35px);
  flex: 1;
  /*color: #dfdfe1;*/
  /*flex: calc(100%-35px);*/
}

#SearchInput {
  width: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

#SearchButtondiv {
  height: 100%;
  justify-content: flex-end;
  width: 35px;
  /*flex: 35px;*/
}

#SearchButton button svg {
  vertical-align: middle;
  fill: #dfdfe1;
  /*justify-content: flex-end;
    flex: 35px;*/
}

#SearchButton {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

#SearchButton:active {
  outline: 1px solid blue;
}

#dropdownwindow {
  display: none;
  margin-left: 0;
  margin-right: 100%;
  height: 100vh;
  z-index: 5;
}

#fullblock {
  height: 100vh;
  position: static;
}

.contentdropdownwindow {
  display: flex;
  /*justify-content: center;*/
}

.CatalogMenuLeft {
  width: 25%;
}

.CatalogMenuRight {
  /*height: 1278px;*/
}

.catalogheader {
  width: 100%;
  height: 30%;
  /*display: flex;*/
  /*justify-content: center;*/
  margin-left: auto;
  margin-right: auto;
}

.crossline,
.bottompart {
  flex: 1;
  /*width: 100%;*/
  /*height: 33%;*/
}

.crosslineright {
  width: 100%;
  /*margin-top: 40px;*/
  /*margin-left: 20px;*/
  /*margin-right: 20px;*/
  /*align: right;*/
  text-align: right;
}

.windowheader {
  flex: 1;
  /*width: 100%;*/
  /*height: calc(100% - 2*37.5px);*/
  /*height: 34%;*/
  margin: auto;
  text-align: center;
}

.windowheader h4 {
  flex: 1;
  /*width: 100%;*/
  margin: auto;
  text-align: center;
}

.flexdisabledscrollbar1,
.flexdisabledscrollbar2,
.flexdisabledscrollbar3 {
  flex: 0;
  width: 5px;
  border-right: 5px solid #f5f5f6;
}

.flexline1 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.flexline2 {
  display: flex;
  justify-content: center;
  height: 34%;
}

.flexline3 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.flexcontent {
  display: flex;
  /*overflow-y: scroll;*/
}

.menulistitem_selected {
  font-weight: bold;
  cursor: pointer;
}

.menulistitem_selected::after {
  content: "\2192";
  /*position: absolute;*/
  margin-left: 5px;
  display: inline-block;
  font-weight: 400;
  transition: all .1s ease;
}

<div id="dropdownwindow">
  <div class="contentdropdownwindow">
    <div class="CatalogMenuLeft">

      <div class="catalogheader">
        <div class="flexline1">
          <div class="crossline">
          </div>
          <div class="flexdisabledscrollbar1">
          </div>
        </div>
        <div class="flexline2">
          <div class="windowheader">
            <h4>Каталог</h4>
          </div>
          <div class="flexdisabledscrollbar2">
          </div>
        </div>
        <div class="flexline3">
          <div class="bottompart">
          </div>
          <div class="flexdisabledscrollbar3">
          </div>
        </div>
      </div>

      <div class="flexcontent">
        <div class="windowmenulist" id="menulist">
          <div class="menulistitem" id="smartphonesandgadgets">
            Смартфоны и гаджеты
          </div>
          <div class="menulistitem" id="notebooksandpcs">
            Ноутбуки и компьютеры
          </div>
          <div class="menulistitem" id="tvsaudiovideohifi">
            Телевизоры, аудио-видео, Hi-Fi
          </div>
          <div class="menulistitem" id="householdappliancesforhomeandkitchen">
            Бытовая техника для дома и кухни
          </div>
          <div class="menulistitem" id="constructionandrepair">
            Строительство и ремонт
          </div>
          <div class="menulistitem" id="houseandcottage">
            Дом и дача
          </div>
          <div class="menulistitem" id="photosvideossecuritysystems">
            Фото, видео, системы безопасности
          </div>
          <div class="menulistitem" id="automotiveproducts">
            Автотовары
          </div>
          <div class="menulistitem" id="officesuppliesfurnitureandofficeequipment">
            Канцтовары, Мебель и Офисная техника
          </div>
          <div class="menulistitem" id="beautyandhealth">
            Красота и здоровье
          </div>
          <div class="menulistitem" id="sportsandrecreation">
            Спорт и отдых
          </div>
          <div class="menulistitem" id="productsforgamers">
            Товары для геймеров
          </div>
          <div class="menulistitem" id="discountedproducts">
            Уцененные товары
          </div>
          <div class="menulistitem" id="giftcertificates">
            Подарочные сертификаты
          </div>
          <div class="menulistitem" id="services">
            Сервисы и услуги
          </div>
        </div>
      </div>
    </div>

    <div id="dropdownwindowright">
      <div class="crosslineright">
        <div class="close">&times;</div>
      </div>
      <div class="CatalogMenuSearch">
        <div id="SearchBlock">
          <div id="SearchInputdiv">
            <input type="search" placeholder="Поиск по товарам" id="SearchInput">
          </div>
          <div id="SearchButtondiv">
            <button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
          </div>
        </div>
      </div>
      <div class="CatalogMenuRight" id="CatalogMenuRight">
      </div>
    </div>
  </div>
</div>

这应该发生在下一个代码块中

document.addEventListener('mousemove', function(e) {
  if ((document.querySelector('#smartphonesandgadgets').offsetWidth < e.offsetX) && (document.querySelector('#smartphonesandgadgets').offsetWidth + 5 >= e.offsetX)
    /*Whether the mouse cursor belongs to the vertical line of the scrollbar, 5px - scrollbar line width
     */
    &&
    (0 <= e.offsetY) && (document.querySelector('#smartphonesandgadgets').offsetHeight >= e.offsetY)) /* Matching the mouse cursor coordinates to the menu item in the left column*/
  /*Checking whether the mouse cursor belongs to the scrollbar
   */
  {
    document.querySelector('#CatalogMenuRight').innerHTML = document.querySelector('#CatalogMenuRight').innerHTML;
  }
})

此代码块检查鼠标光标是否已击中左侧列（元素边框上）中与菜单项相邻的滚动条部分，如果已击中，则右侧部分的内容不会改变。最后一个屏幕截图突出显示滚动条的相邻部分。

标签： javascripthtmlcssscroll