БЛОГ НА HUSL


Получение координат курсора мыши после её передвижения. Обращение к скроллбару

Автор вопроса: megaadegia

Есть некоторое положение курсора мыши. После ее передвижения мышь поменяла свое местоположение. Как получить текущее положение мыши после передвижения, например, если текущее положение мыши находится внутри скроллбара?

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')});             
});
*/

const smartphonesandgadgets = document.querySelector('#smartphonesandgadgets');
smartphonesandgadgets.addEventListener('mouseover', (event) => {
  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
    });
})

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

#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: 2.5px;
  border: 0px solid #f5f5f6;
}

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

.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;
}

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

.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;
}
<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>

Привожу скриншот с одной из выделенной частей скроллбара

введите сюда описание изображения

Код скроллбара следующий

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


/* 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: 2.5px;
  border: 0px solid #f5f5f6;
}

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

Каким образом отследить момент, при котором курсор мыши переводится с левого бокового меню на скроллбар?


Источник

Ответы (1 шт):

Автор решения: letUser

Через CSS для визуального редактирования:

.windowmenulist::-webkit-scrollbar:hover

Через JS для программной логики:

на .windowmenulist::-webkit-scrollbar используйте ивент mouseenter(e)

hover в CSS: https://habr.com/ru/post/265451/

скроллбар в CSS: http://websketches.ru/blog/kastomizacia-brauzernogo-skrollbara

ивент mouseenter: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

все по теме ивентов мыши в JS: https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave

→ Ссылка

licensed under cc by-sa 3.0 with attribution.