SOURCE

/*
 Here add the ID of the HTML elements for which to show the mouse coords
 Within quotes, separated by comma.
 E.g.:   ['imgid', 'divid'];
*/
var elmcls = ['kanban','yongdao-cards'];

var x, y = 0; // variables that will contain the coordinates
var h = 0; // variables that will contain elm height
var speedX = 0; // variables that indicates scrollX speed
var speedY = 0; // variables that indicates scrollY speed
// Get X and Y position of the elm
function getDivsXY(elm) {
  x = elm.offsetLeft; // set x to elm’s offsetLeft
  y = elm.offsetTop; // set y to elm’s offsetTop
  h = elm.offsetHeight;
  elm = elm.offsetParent; // set elm to its offsetParent
  //use while loop to check if elm is null
  // if not then add current elm’s offsetLeft to x
  //offsetTop to y and set elm to its offsetParent
  while (elm != null) {
    x = parseInt(x) + parseInt(elm.offsetLeft);
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
  }

  // returns an object with "xp" (Left), "=yp" (Top) position
  return {
    'xp': x,
    'yp': y,
  };
}

// Get Cursor's X, Y coords, and displays Mouse coordinates
function getCursorXyInDiv(e) {
  // coursesweb.net/
  var xy_pos = getDivsXY(this);

  // if IE
  if (navigator.appVersion.indexOf("MSIE") != -1) {
    // in IE scrolling page affects mouse coordinates into an element
    // This gets the page element that will be used to add scrolling value to correct mouse coords
    var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement: document.body;

    x = event.clientX + standardBody.scrollLeft;
    y = event.clientY + standardBody.scrollTop;
  } else {
    x = e.pageX;
    y = e.pageY;
  }

  x = x - xy_pos['xp'];
  y = y - xy_pos['yp'];
  speedX = 0;
  speedY = 0;

  // displays x and y coords in the #coords element
  document.getElementById('coords').innerHTML = 'X= ' + x + ' ,Y= ' + y + ' ,h= ' + h + ' ,speedX= ' + speedX + ' ,speedY= ' + speedY;
}

// register onmousemove, and onclick the each element with ID stored in elmids
for (var i = 0; i < elmcls.length; i++) {
  if (document.getElementsByClassName(elmcls[i])) {
    // calls the getCoords() function when mousemove
    let elmGot = document.getElementsByClassName(elmcls[i]);
    for (var a = 0; a < elmGot.length; a++) {
      elmGot[a].onmousemove = getCursorXyInDiv;
    }
  }
}

<div class="kanban">
  <div class="yongdao-cards">
  </div>
  <div class="yongdao-cards">
  </div>
  <div class="yongdao-cards">
  </div><div class="yongdao-cards">
  </div><div class="yongdao-cards">
  </div><div class="yongdao-cards">
  </div><div class="yongdao-cards">
  </div>
</div>
<div>
  Click to add the coordinates in this text field.
</div>
<input type="text" name="regcoords" id="regcoords" />
<div id="coords">
  Coords
</div>

body {
  background: coral;
}

.kanban {
  height: 300px;
  padding:20px;
  box-sizing: border-box;
  border:2px dashed;
  overflow-x: auto;
  overflow-y: hidden;
display:flex;
  justify-content: flex-start;
  align-items: center;
}

.yongdao-cards {
  margin: 5px;
  color: white;
  height: 250px;
  width: 100px;
  flex-basis: 100px;
  flex: 1 0 auto;
  background: #0809fe;
/*   padding-bottom: 50px;
  background-clip: content-box; */
}