首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 使用固定导航栏将元素拖动到顶部时页面不会向上滚动

我有一个页面上的元素需要拖到页面的顶部或底部-如果有一个很长的元素列表，页面应该在拖动元素的同时自动向上或向下滚动.

当将元素从页面的顶部拖动到底部时，我发现滚动没有问题，但是，如果我要拖动的元素是从底部拖动到顶部的，我发现固定的顶部导航栏不允许页面向上滚动.

这是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中修复.

推荐答案

下面是示例代码，上面、右边和左边的导航是固定的，中间有一个可以滚动的容器.需要注意的重要事项是赋予每个元素的高度. 它没有在示例代码中滚动的原因是因为可拖动容器的顶部和底部不在可以触发Scroll事件的视口的顶部.

<!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相关问答推荐

可以的.是否可以在不预编译的情况下使用嵌套 Select 器？

react 路由加载程序行为

React：未调用useState变量在调试器的事件处理程序中不可用

TypScript界面中的Infer React子props

如何解决CORS政策的问题

防止用户在selectizeInput中取消 Select 选项

网页自检测外部元素无法加载

将自定义排序应用于角形数字数组

自定义高图中的x轴标签序列

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

Html文件和客户端存储的相关问题，有没有可能？

S文本内容和值不必要的不同

在渲染turbo流之后滚动到元素

JavaScript -复制到剪贴板在Windows计算机上无效

如何让SVG图标在被点击和访问后改变 colored颜色 ，并在被访问后取消点击时恢复到原来的 colored颜色 ？

我无法在Api Reaction本机上发出GET请求

在对象的嵌套数组中添加两个属性

在JS/TS中构造RSA公钥

使用Java脚本筛选数组中最接近值最小的所有项

与find()方法一起使用时，Mongoose中的$or运算符没有提供所有必需的数据

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630