我的页面上有需要可拖动到页面顶部或底部的元素 - 如果元素列表很长，则在拖动元素时页面应自动向上或向下滚动。
我发现从页面顶部拖动元素到底部时滚动没有问题，但是，如果我要拖动的元素是从底部到顶部，我发现固定顶部导航栏确实如此不允许页面向上滚动。
这是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>我想先看看是否有办法在 HTML/CSS 中解决这个问题，如果没有，可以在 JavaScript 中解决。
最佳答案
下面是具有固定顶部、右侧和左侧导航以及可以滚动的中心容器的示例代码。需要注意的重要事项是每个元素的高度。 在示例代码中它不滚动的原因是可拖动容器的顶部和底部不在可以触发滚动事件的视口(viewport)顶部。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: green;
}
.sticky {
padding: 0 16px;
background: #555;
color: #f1f1f1;
position: fixed;
top: 0;
width: 100%;
height: 80px;
}
.parent-container {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
background-color: pink;
}
h1 {
margin: 0;
padding: 0;
}
.container-con{
position: static;
overflow-y: scroll;
height: 100%;
}
.container{
position: relative;
top:80px;
overflow-y: scroll;
height: calc(100% - 82px);
border: 1px solid red;
}
.container > div {
display: inline-block;
vertical-align: top;
}
.left-nav{
position: fixed;
width: 100px;
}
.center-nav{
margin-left: 100px;
width: 250px;
height: calc(100% - 10px);
overflow-y: scroll;
border: 1px solid blue;
}
.right-nav{
width: 100px;
position: fixed;
right: 0;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="sticky">
<h1>My Header</h1>
</div>
<div class="container-con">
<div class="container" >
<div class="left-nav">
Left nav
</div>
<div class="center-nav">
<div draggable="true">draggable start <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable 4 <br><br></div>
<div draggable="true">draggable 1 <br><br></div>
<div draggable="true">draggable 2 <br><br></div>
<div draggable="true">draggable 3 <br><br></div>
<div draggable="true">draggable end <br><br></div>
</div>
<div class="right-nav">
right nav
</div>
</div>
</div>
</div>
</body>
</html>关于javascript - 使用固定导航栏将元素拖动到顶部时页面不会向上滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71206691/