1

I am trying to create a Leaflet menu based on the properties of the Layer Control code of Leaflet. This menu becomes automatically scrollable if it is greater than the space left between the top of menu and the bottom of the map.

Javascript:

    var acceptableHeight = this._map._size.y - (this._container.offsetTop + 60);

    if (this._form.clientHeight > acceptableHeight) {
        this._form.style.height = acceptableHeight + 'px';
        L.DomUtil.addClass(this._form, 'menu-scrollbar');
    }
    else {
        L.DomUtil.removeClass(this._form, 'menu-scrollbar');
    }

CSS:

    .menu-scrollbar {
        overflow-y: auto;
        padding-right: 10px;
    }

The scroll bar is perfectly created depending on the size of the form, but it always moves to the top when the mouse cursor goes out of the scrolling bar zone (that is the line which the bar follows). Something also strange is that the bar stays on the same place only if the mouse is quickly changing its cursor type (such as when located on an HTML input zone).

An image can be better than a long explanation: screenshot of the menu.

I've been looking around similar problems with the scrolling bar:

  1. "Why the vertical scroll bar moves automatically?"
  2. "Scroll bar goes up"

But the answers are not exactly related to the same issue, and I would like to use pure JavaScript rather than mix it with jQuery. One of the feasible solution could be to get the scroll bar position (how to get it) and set it manually (how to do it).

But I am sure that this problem comes from something else tht i don't get. Can someone help me with this ?

Fiddle example: http://jsfiddle.net/LnzN2/1121/

Thank you in advance.

lreza
  • 11
  • 3
  • I think you have to provide a [Minimal, Complete, Verifiable example](http://stackoverflow.com/help/mcve). I can only guess it's a race condition somewhere, but it's gonna be impossible to know without seeing the code failing. – IvanSanchez Jun 23 '17 at 12:39
  • Hello Ivan, thank you for answering! Actually all the inner structure of the HTML form is created is JS, dynamically from a provided JSON object. So it is very hard to give a complete and understandable example. You can view the architecture of it in this fiddle : https://jsfiddle.net/Lcs96ouj/1/ I guess one of the CSS properties is conflicting with another one, as you said, maybe a race condition. Hope this helps – lreza Jun 23 '17 at 13:49
  • If you say «it's very hard to give a complete example», then I'm allowed to reply «it's very hard to know what the heck is wrong». I encourage you to isolate the problem. – IvanSanchez Jun 23 '17 at 14:10
  • Yes I totally understand, to be more precise about the issue you can see on that picture http://imgur.com/a/zWVt0 that when the mouse is on the purple zone (i've set padding-right to 100px) then i can scroll without any problem. As soon as the cursor moves to the light blue zone, the scroll bar goes to the top automatically, as described in the post. – lreza Jun 23 '17 at 16:14
  • @IvanSanchez please find this minimal example in a Fiddle to assess the issue : http://jsfiddle.net/LnzN2/1121/ the issue is that the scrolling bar goes automatically on the top in the control element (top-left) – lreza Aug 07 '17 at 15:36

0 Answers0