Resizable nicht mehr funktioniert, wenn nach unten gescrollt

Question

Ich habe eine scrollbare div und machte es resizable am Boden:

$("#mydiv").resizable({ 
    handles: "s", 
}); 

Es funktioniert, aber nur, wenn es ganz nach oben gescrollt wird:

Wenn Sie es nach unten scrollen, scheint die Größe veränderbare Funktion arbeiten zu stoppen:

Here is a fiddle.

Answer 1

Ich habe ein Spiel mit ihm hatte und eine Lösung gefunden (hoffentlich). Ich habe Ihre .resizable() in einem Container div wie folgt platziert und alles scheint in this fiddle zu arbeiten. Der Code:

HTML:

<div id="resizeContainer"> 

    <div id="mydiv" class="ui-widget-content"> 
    <img src="https://cdn3.iconfinder.com/data/icons/car-icons-front-views/480/Sports_Car_Front_View-512.png" width="400"> 
    </div> 

</div> 

Javascript:

$("#resizeContainer").resizable({ 
    handles: "s", 
}); 

CSS:

#resizeContainer { 
    height: 200px; 
    overflow:hidden; 
    padding-bottom: 20px; 
    padding-right: 20px; 
} 

#mydiv { 
    height: 100%; 
    width: 100%; 
    border-bottom: 3px solid red; 
    padding: 0.5em; 
    overflow: auto; 
} 

Answer 2

das Hinzufügen behebt es:

$("#mydiv").on("resize", function(){ 
    $("#mydiv").resizable({ 
     handles: "s", 
    }); 
});