CODEWITHSUNDEEP
javascripthtmlcss
N.Tec
N.Tec

Reputation: 127

Is there any ways other than set scrollbar hidden

I'm facing some issues on dragging the separator of a split pane. When dragging to the left, the separator will stop and jam because of the scrollbar of the iframe. I'm thinking of hide the scroll bar and show when hovering it. Is there a better way of doing this?

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 is used for dragging and moving

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" );

Upvotes: 1

Views: 64

Answers (1)

artanik
artanik

Reputation: 2714

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

As a solution, you can try CSS property pointer-events to ignore all "pointer" events related to the target element.

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

Upvotes: 2

Related Questions