Блог

Я сталкиваюсь с некоторыми проблемами при перетаскивании разделителя разделенной панели. При перетаскивании влево разделитель остановится и застрянет из-за полосы прокрутки iframe. Я подумываю о том, чтобы скрыть полосу прокрутки и показывать при наведении на нее курсора. Есть ли лучший способ сделать это?

https://jsfiddle.net/kbxy2f6j/13/

 <div class="splitter">
<div id="first">
    <iframe src="{{ route('child') }}" class="bg-light" style="width:100%; height:100%" frameBorder="0">
        Your browser isn't compatible
        </iframe>
</div>
<div id="separator" ></div>
<div id="second" ></div>
  

// функция используется для перетаскивания

 function dragElement( element, direction)
{
    var   md; // remember mouse down info
    const first  = document.getElementById("first");
    const second = document.getElementById("second");
    
    element.onmousedown = onMouseDown;
    
    function onMouseDown( e )
    {
    //console.log("mouse down: "   e.clientX);
    md = {e,
          offsetLeft:  element.offsetLeft,
          offsetTop:   element.offsetTop,
          firstWidth:  first.offsetWidth,
          secondWidth: second.offsetWidth};
    document.onmousemove = onMouseMove;
    document.onmouseup = () => { 
        //console.log("mouse up");
        document.onmousemove = document.onmouseup = null;
    }
    }
    
    function onMouseMove( e )
    {
    //console.log("mouse move: "   e.clientX);
    var delta = {x: e.clientX - md.e.clientX,
                 y: e.clientY - md.e.clientY};
    
    if (direction === "H" ) // Horizontal
    {
        // prevent negative-sized elements
        delta.x = Math.min(Math.max(delta.x, -md.firstWidth),
                   md.secondWidth);
        
        element.style.left = md.offsetLeft   delta.x   "px";
        first.style.width = (md.firstWidth   delta.x)   "px";
        second.style.width = (md.secondWidth - delta.x)   "px";
    }
    }
}


dragElement( document.getElementById("separator"), "H" );
  

https://jsfiddle.net/9bs4n17y/2/

В качестве решения вы можете попробовать CSS property pointer-events игнорировать все события «указателя», связанные с целевым элементом.

 first.style.pointerEvents = 'none'; // <---
document.onmousemove = onMouseMove;
document.onmouseup = () => { 
   //console.log("mouse up");
   first.style.pointerEvents = null; // <---
   document.onmousemove = document.onmouseup = null;
}