Leaflet demo

For update marker position

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<div id="map">
  <div id='parent-div' class='some-div'>
    I am the parent! Like the leaflet map, I don't want the mouse events clicking/scrolling bubbling onto me neither.
    <div class='some-div' id='no-scrolling-clicking'>
      Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop
      Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me!
    </div>
  </div>
</div>

CSS

#map {
  height: 500px;
  width: 100%;
}

.some-div {
  position: absolute;
  bottom: 7px;
  left: 7px;
  overflow-y: auto;
}

#parent-div {
  background-color: lightgreen;
  height: 400px;
  width: 200px;
  z-Index: 998;
}

#no-scrolling-clicking {
  font-weight: bold;
  font-size: 20px;
  color: white;
  z-index: 999;
  background-color: hotpink;
  width: 150px;
  height: 300px;
}

JavaScript

const osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

var el = document.getElementById('no-scrolling-clicking');
L.DomEvent.disableScrollPropagation(el);