Question

我在这里有一个演示 - https://codepen.io/mt-ttmt/pen/mLMGvr

我有一个水平滚动的内容div

我需要在此滚动内容的任何一侧留有余量。

我使用calc。

完成了这项工作

当页面滚动时，滚动内容会使用position：fixed;

粘贴到页面顶部

当发生这种情况时，我会失去边缘。

如何将边距保持在位置：固定;

html, body{
  height: 100%;
}

body {
  background: grey;
  font-family: sans-serif;
  margin: 0;
}

.upper-content{
  background: red;
  height: 250px;
}

.page-content{
  position: relative;
  background: white;
  height: 2000px;
  max-width: 900px;
  margin: 0 auto;
}

.content-wrapper{
  position: relative;
}

.header-scroll{
  border: 1px solid yellow;
  left: 50%;
  overflow-y: scroll;
  position: absolute;
  max-width: 900px;
  z-index: 20;
  transform: translateX(-50%);
  width: -webkit-calc(100% - 50px);
}

.content{
  display: flex;
  float: left;

  div{
    background: lightgrey;
    font-size: 20px;
    padding: 40px;
    margin-right: 5px;
    width: 100%;

    &:last-of-type{
      margin-right: none;
    }

  }
}

.fixed{
  position: fixed;
  top: 0;
  //margin: 0 25px 0 25px;
  //width: calc(100% - 50px);
}

Answer 1

更改.fixed班级宽度值。

.fixed{ width: calc(900px - 50px); }

CSS - Calc无法使用固定位置

1 个答案: