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 = ['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) {
  let x = elm.offsetLeft; // set x to elm’s offsetLeft
  let y = elm.offsetTop; // set y to elm’s offsetTop
  let h = elm.offsetHeight;
  let w = elm.offsetWidth;
  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,
    'divH': h,
    'divW': w,
  };
}

//刷新屏幕, 更新scrollLeft值
function updatescrollX(elm, spdX) {
  if (spdX !== 0) {
    scrollX += spdX / 5;
    console.log(scrollX);
    if (scrollX < 0) {scrollX = 0;}
    let max_scroll = elm.scrollWidth - elm.outerwidth;
    if (scrollX > max_scroll) {scrollX = max_scroll;}
    console.log(scrollX);
    elm.scrollLeft = scrollX;
  }
  
}

// Get Cursor's X, Y coords, and displays Mouse coordinates
function getCursorXyInDiv(e) {
  let xy_pos = getDivsXY(this);
  let x = 0;
  let y = 0;
  // 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
    let 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'];
  let w = xy_pos['divW'];
  let h = xy_pos['divH'];
  let speedX = 0;
  let speedY = 0;
  let hotSpotX = 200;
  let hotSpotY = 60;
  //增加speedX = 0 的宽度, 设定speedX的值
  if (x >= hotSpotX && w - x >= hotSpotX) {
    speedX = 0;
  } else if (x < hotSpotX) {
    speedX = -10 * Math.sqrt((hotSpotX - x) / hotSpotX);
  } else {
    speedX = 10 * Math.sqrt((hotSpotX - w + x) / hotSpotX);
  }

  //增加speedY = 0 的高度, 设定speedY的值
  if (y >= hotSpotY && h - y >= hotSpotY) {
    speedY = 0;
  } else if (y < hotSpotY) {
    speedY = -5 * Math.sqrt((hotSpotY - y) / hotSpotY);
  } else {
    speedY = 5 * Math.sqrt((hotSpotY - h + y) / hotSpotY);
  }

  // displays x and y coords in the #coords element
  document.getElementById('coords').innerHTML = 'X= ' + x + ' ,Y= ' + y + ' ,h= ' + h + ' ,w= ' + w + ' ,speedX= ' + speedX + ' ,speedY= ' + speedY;
  
  let usx = updatescrollX(this, speedX);
  window.requestAnimationFrame(updatescrollX);
}

// 以下函数实际应用中需要在卡片的onmousedown事件与泳道或者看板的onmouseover事件同时生效时执行
let elmcls = ['yongdao-cards'];
// 给elmcls中的元素注册onmousemove事件
for (var i = 0; i < elmcls.length; i++) {
  if (document.getElementsByClassName(elmcls[i])) {
    // calls the getCursorXyInDiv() function when mousemove
    let elmGot = document.getElementsByClassName(elmcls[i]);
    for (var a = 0; a < elmGot.length; a++) {
      elmGot[a].onmousemove = getCursorXyInDiv;
    }
  }
}


window.requestAnimationFrame(getCursorXyInDiv);

<div id="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 class="yongdao-cards">
  </div>
  <div class="yongdao-cards">
  </div>
  <div class="yongdao-cards">
  </div>
</div>
</div>
<div class="yongdao-cards tryX">
  <div class="long"></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: 500px;
  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: 100%;
  width: 100px;
  flex-basis: 100px;
  flex: 0 0 auto;
  background: #0809fe;
  /*   padding-bottom: 50px;
  background-clip: content-box; */
}

.tryX {
  width: 100%;
  height: 50px;
  background: seagreen;
  overflow-x: auto;

}

.long{
    width: 2000px;
  background: red;
  height:1px;
}