特殊滚动效果

西瓜皮儿 2023/2/22

# 手机禁止滚动过界

最外层的可滚动盒子（一般是body），需要给出绝对定位，否则内部元素滚出范围会带着父元素滚动越界

<body>
  <div class="father">
    <div class="child"></div>
  </div>

  <style>
    /* 滚动元素 father */
    .father {
      display: fixed;
      top: 0;

      overflow-y: scroll;
    }

  </style>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# body 防止负距离滚动

body {
  overscroll-behavior: none;
}

1
2
3