Getting the coordinates of the mouse cursor after moving it

Question

There is some position of the mouse cursor. After her movement, the mouse changed its location. How to get the current position of the mouse after movement, for example, if the current position of the mouse is inside the scrollbar? How to add an event mousemove to the scrollbar?

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>

ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast contentballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast contentballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content

In the screenshot, the mentioned part of the scrollbar is highlighted in pencil

scrollbarandmouse

How to track the moment at which the mouse cursor moves from the left side menu to the scrollbar?

Does this answer your question? [Javascript - Track mouse position](https://stackoverflow.com/questions/7790725/javascript-track-mouse-position) — Keshav Bajaj, Aug 08 '21 at 12:57

score 0 · Answer 1 · answered Aug 08 '21 at 15:07

event.clientX event.clientY

in event it self you will find position

smartphonesandgadgets.addEventListener('mouseover', (event) => { 
    var cursorX = e.pageX;
    var cursorY = e.pageY;
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY;

Getting the coordinates of the mouse cursor after moving it

1 Answers1