I have elements on a page that needs to be draggable to the top or bottom of the page - if there is a long list of elements, the page should automatically scroll up or down while dragging the elements.
I find no issue with scrolling when dragging an element from the top to the bottom of the page, however, if the element that I want to drag is from the bottom to the top, I found that the fixed top navigation bar does not allow the page to scroll up.
Here is the JSFiddle
.App {
font-family: sans-serif;
text-align: center;
}
h1 {
background-color: teal;
width: 100%;
position: fixed;
z-index: 100;
top: -25px;
height: 50px;
}<html>
<body>
<div class="App">
<h1>This is a fixed navbar</h1>
<p>item</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
<p draggable="true">
Draggable paragraph. Page should scroll when you drag up or down
</p>
</div>
</body>
</html>I would like to see first if there is a way to fix this in HTML / CSS, if not, in JavaScript.