问滚动填充属性不会阻止元素接触flex容器边缘
EN

Stack Overflow用户

提问于 2020-07-19 03:23:05

回答 1查看 56关注 0票数 1

这是我在这里的第一个问题。StackOverflow帮了我很多。问题:由于某些原因，当我在父flex容器上设置scroll-padding属性时，幻灯片元素并没有停止接触边缘。我试过这么多方法，但是什么都没有。所以我决定去帮助我解决其他问题的平台。在对代码进行了一系列更改之后，我最终得到了这样的结果。一个@mixin，它接收用于配置滑块及其幻灯片的数据。在滚动行为或幻灯片向前和向后移动时存在一些不一致，它们不能以相同的方式适应可见区域。这个@mixin被@包含在我的主css文件中，以便对html可见的类设置样式。谢谢

@mixin slider_s1(
  $slide_width: 700px,
  $slide_height: 500px,
  $slider_background_color: grey,
  $size_propagation_percentage: 1.03
  ){

  ///Element that hold all the elements necessary for the slide element(carousel)
  .slider-wrap{
    width: ($slide_width*$size_propagation_percentage)*$size_propagation_percentage;
    height: ($slide_height*$size_propagation_percentage)*$size_propagation_percentage;

    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;

    border: yellow solid;
  }
  .slider_s1{
    width: ($slide_width*$size_propagation_percentage);
    height: ($slide_height*$size_propagation_percentage);

    border: solid red;
    overflow-x: hidden;

    //Flexbox Layout module
    display: flex;
    flex-direction: row;

    //Scroll Snap module
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;

    .slide_s1{
      width:$slide_width;
      height:$slide_height;
      border:black solid;
      margin: auto (($slide_width*$size_propagation_percentage)-$slide_width)/2;

      //Flexbox Laytout module
      flex-shrink: 0;
      flex-grow: 0;
    }
  }
}

<html>
<header>
  <link rel="stylesheet" href="_css/slider.css">
</header>
<body>
<div class="slider-wrap">
  <div class="indicators-wrap">
    <div class="indicators">
      <a href="#slide-1">1</a>
      <a href="#slide-2">2</a>
      <a href="#slide-3">3</a>
      <a href="#slide-4">4</a>
      <a href="#slide-5">5</a>
    </div>
  </div>
  <div class="slider_s1">
    <div class="slide_s1" id="slide-1">Slide Data 1</div>
    <div class="slide_s1" id="slide-2">Slide Data 2</div>
    <div class="slide_s1" id="slide-3">Slide Data 3</div>
    <div class="slide_s1" id="slide-4">Slide Data 4</div>
    <div class="slide_s1" id="slide-5">Slide Data 5</div>
  </div>
</div>
</body>
</html>

html

css

web

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-23 01:18:51

我已经找到解决方案了。我忘了在flex容器中使用align-items:center属性。现在我做到了，项目居中了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62972852

复制

相似问题

问滚动填充属性不会阻止元素接触flex容器边缘
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动填充属性不会阻止元素接触flex容器边缘EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动填充属性不会阻止元素接触flex容器边缘
EN