如何使一列仅在水平滚动条上固定位置?

侯伊·纳伦

我有一种内联形式,横跨水平和垂直方向。在此表单中,我最后一列是添加按钮,我希望它具有固定的位置,但是仅当我水平滚动而不是垂直滚动表单时才可以。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <title>Hello, world!</title>

  <style>
    .btn-control {
      position: fixed;
      right: 0;
    }
  </style>
</head>

<body>
  <h1>Inline form</h1>

  <div class="container" style="width: 55%; height: 500px;">
    <div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
      <form style=" ">
        <div class="form-row flex-nowrap">
          <div class="col-3">
            <label for="">First Name</label>
            <input type="text" class="form-control" placeholder="First name">
          </div>
          <div class="col-3">
            <label for="">Last Name</label>
            <input type="text" class="form-control" placeholder="Last name">
          </div>
          <div class="col-3">
            <label for="">Gender</label>
            <input type="text" class="form-control" placeholder="Gender">
          </div>
          <div class="col-3">
            <label for="">Age</label>
            <input type="text" class="form-control" placeholder="Age">
          </div>
          <div class="col-3">
            <label for="">Phone Numher</label>
            <input type="text" class="form-control" placeholder="Phone Numher">
          </div>


          <div class="col-3 btn-control">
            <p></p>
            <button class="btn btn-info btn-circle">+</button>
          </div>
        </div>
        <div class="form-row flex-nowrap">
          <div class="col-3">
            <label for="">First Name</label>
            <input type="text" class="form-control" placeholder="First name">
          </div>
          <div class="col-3">
            <label for="">Last Name</label>
            <input type="text" class="form-control" placeholder="Last name">
          </div>
          <div class="col-3">
            <label for="">Gender</label>
            <input type="text" class="form-control" placeholder="Gender">
          </div>
          <div class="col-3">
            <label for="">Age</label>
            <input type="text" class="form-control" placeholder="Age">
          </div>
          <div class="col-3">
            <label for="">Phone Numher</label>
            <input type="text" class="form-control" placeholder="Phone Numher">
          </div>

          <div class="col-3 btn-control">
            <p></p>
            <button class="btn btn-info btn-circle">+</button>
          </div>
        </div>
        <div class="form-row flex-nowrap">
          <div class="col-3">
            <label for="">First Name</label>
            <input type="text" class="form-control" placeholder="First name">
          </div>
          <div class="col-3">
            <label for="">Last Name</label>
            <input type="text" class="form-control" placeholder="Last name">
          </div>
          <div class="col-3">
            <label for="">Gender</label>
            <input type="text" class="form-control" placeholder="Gender">
          </div>
          <div class="col-3">
            <label for="">Age</label>
            <input type="text" class="form-control" placeholder="Age">
          </div>
          <div class="col-3">
            <label for="">Phone Numher</label>
            <input type="text" class="form-control" placeholder="Phone Numher">
          </div>

          <div class="col-3 btn-control">
            <p></p>
            <button class="btn btn-info btn-circle">+</button>
          </div>
        </div>


      </form>
    </div>
  </div>


  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

我已经设置position: fixed但不能解决问题,因为该按钮在水平和垂直方向上均具有固定位置。我找到了一些资源,但是不符合我的需求。

谢谢。

法希尔

粘性位置应该起作用

.btn-control {
  position: sticky;
  right: 0;
}

如果可行,您可以更改right职位

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

位置:绝对导致水平滚动条

来自分类Dev

将div的水平滚动条固定到页面底部

来自分类Dev

如何使固定的背景图像不固定在滚动条上?

来自分类Dev

当水平条高度未知时,如何制作水平条(固定位置,始终在屏幕顶部)?

来自分类Dev

水平滚动条?

来自分类Dev

如何在表格上隐藏水平滚动条

来自分类Dev

水平滚动条消失,设置要填充的最后一列大小

来自分类Dev

jQuery位置DIV固定在滚动条上

来自分类Dev

固定在水平滚动条的左侧

来自分类Dev

如何使滚动条保持在固定位置div的内部,并且顶部像素向下推?

来自分类Dev

如何使水平div滚动条像固定的CSS div一样浮动

来自分类Dev

使用Bootstrap使水平滚动固定一列?

来自分类Dev

如何隐藏水平滚动条

来自分类Dev

Safari“位置:固定”在滚动条上重叠

来自分类Dev

如何在水平滚动条上使用位置粘性?

来自分类Dev

如何获得位置:固定;滚动条的行为

来自分类Dev

如何防止水平滚动条在JTree.scrollPathToVisible(TreePath)上滚动?

来自分类Dev

水平滚动时,使表格中的第一列固定

来自分类Dev

在水平滚动条上显示固定宽度的顶部栏

来自分类Dev

新的固定位置div创建后,滚动条不显示

来自分类Dev

固定水平滚动条

来自分类Dev

使用一个滚动条同时水平滚动列内的所有行

来自分类Dev

滚动条上的固定侧栏

来自分类Dev

使固定位置div可滚动而无需滚动条,也无需滚动背景内容

来自分类Dev

如何使div固定位置水平滚动?

来自分类Dev

如何删除水平滚动条?

来自分类Dev

水平滚动但第一列固定的表格

来自分类Dev

使用 div 动态显示列,第一列固定,其余全部带有水平滚动条

来自分类Dev

如何将滚动条(水平)指针移动到特定位置?

Related 相关文章

  1. 1

    位置:绝对导致水平滚动条

  2. 2

    将div的水平滚动条固定到页面底部

  3. 3

    如何使固定的背景图像不固定在滚动条上?

  4. 4

    当水平条高度未知时,如何制作水平条(固定位置,始终在屏幕顶部)?

  5. 5

    水平滚动条?

  6. 6

    如何在表格上隐藏水平滚动条

  7. 7

    水平滚动条消失,设置要填充的最后一列大小

  8. 8

    jQuery位置DIV固定在滚动条上

  9. 9

    固定在水平滚动条的左侧

  10. 10

    如何使滚动条保持在固定位置div的内部,并且顶部像素向下推?

  11. 11

    如何使水平div滚动条像固定的CSS div一样浮动

  12. 12

    使用Bootstrap使水平滚动固定一列?

  13. 13

    如何隐藏水平滚动条

  14. 14

    Safari“位置:固定”在滚动条上重叠

  15. 15

    如何在水平滚动条上使用位置粘性?

  16. 16

    如何获得位置:固定;滚动条的行为

  17. 17

    如何防止水平滚动条在JTree.scrollPathToVisible(TreePath)上滚动?

  18. 18

    水平滚动时,使表格中的第一列固定

  19. 19

    在水平滚动条上显示固定宽度的顶部栏

  20. 20

    新的固定位置div创建后,滚动条不显示

  21. 21

    固定水平滚动条

  22. 22

    使用一个滚动条同时水平滚动列内的所有行

  23. 23

    滚动条上的固定侧栏

  24. 24

    使固定位置div可滚动而无需滚动条,也无需滚动背景内容

  25. 25

    如何使div固定位置水平滚动?

  26. 26

    如何删除水平滚动条?

  27. 27

    水平滚动但第一列固定的表格

  28. 28

    使用 div 动态显示列,第一列固定,其余全部带有水平滚动条

  29. 29

    如何将滚动条(水平)指针移动到特定位置?

热门标签

归档