时间戳

首页 > 解决方案 > 比 div 宽度更小的水平滚动条？+ 没有图片说明？

css - 比 div 宽度更小的水平滚动条？+ 没有图片说明？

问题描述

我正在尝试使用水平滚动来制作图像“旋转木马”。没有 JS 的纯 HTML + CSS。

这是我的 HTML：

<div class="slideshow">
    <figure class="slideshow__fig">
        <img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
        <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
    <figure class="slideshow__fig">
        <img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
        <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
    <figure class="slideshow__fig">
        <img src="img/hilti-png.png" alt="p" class="slideshow__fig-img">
        <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
</div>

这是我的CSS：

.slideshow {

display: flex;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: scroll;
//width: 80vw;
//margin: auto;

&::-webkit-scrollbar {
    width: 350px;
    height: 10px;
  }
  
  /* Track */
  &::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 500px;
  }
  
  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }


&__fig {
    flex: 0 0 auto;
    height: 900px;

    &-img{
        height: 100%;
        //width: 100%;
        display: block;
    }
}

}

1 - 问题是当我将 .slideshow 的宽度设置为 80vw 时，滚动条自然会变短，但我的图像被裁剪并且没有完全显示宽度。当我尝试使用 ::-webkit-scrollbar {width: 350px or 50vw or ...} 调整滚动条的宽度时，完全没有任何反应。

我想要一个滚动条，它不是我正在滚动的 div 的全宽，但不知何故无法弄清楚。

2 - 另一个问题是我想在图像的左下方有一个 figcaption。但不知何故，它没有显示水平滚动何时存在。有什么建议么？

这是我想要的示例：

示例图像

编辑：现在我终于设法通过添加：

&::-webkit-scrollbar-button:end:increment {
    width: 50%;
    display: block;
    background: transparent;
  }

但是现在的问题是滚动条不在中间，而是在左侧。保证金：自动没有帮助。不知道该怎么做。

还使 img size 90% 显示了标题，这不是那么糟糕的解决方案。

现在唯一的问题是如何将滚动条放在中间。

标签： cssscrollbarhorizontal-scrolling

解决方案

这是与您作为示例提供的图像接近的东西。抱歉，但我真的不知道如何在没有 JS标准的情况下尊重纯 HTML + CSS 来实现这一点。我认为根本不可能。

所以在这里，它使用 jQuery 和 jQuery-ui 可拖动。

它使用包含在其父级中的可拖动 div。Ondrag，它计算“滚动”百分比以将其应用于图像滑块的可滚动宽度。

对于手机...我为 jQuery-ui 添加了“触摸打孔”补丁。更多细节在这里。我还将“初始化代码”放在一个函数中，因此它可以在加载和调整大小时运行。

$(document).ready(function(){
  function initDisplay(){
    let slide_scrollWidth = $("#slide")[0].scrollWidth;
    let customScrollbar_width = $("#sliderScroll_outer")[0].scrollWidth;
    let percent = slide_scrollWidth/customScrollbar_width
    $("#sliderScroll").css({"width":percent+"%", "left":0})
    $("#slide")[0].scrollTo(0,0)
  }

  // On page load
  initDisplay()

  // Useful for mobile orientation change
  window.onresize = initDisplay

  $("#sliderScroll").draggable({ 
    containment: "#sliderScroll_outer",
    scroll: false,
    drag: function(e){

      let parentOffset = $(e.target).parent().offset().left
      let offset = $(e.target).offset().left
      let scrollableWidth = $(e.target).parent().width() - $(e.target).width()
      let sliderPercent = (offset-parentOffset)/scrollableWidth
      //console.log(sliderPercent)

      let imageSliderWidth = $("#slide")[0].scrollWidth - $("#slide").width()

      //console.log(imageSliderWidth)

      $("#slide")[0].scrollTo(sliderPercent*imageSliderWidth,0)
    }
  });
});
#container{
  margin: 1em;
}

#slide{
  display: flex;
  overflow: hidden;
}

#slide img{
  margin: 0 0.5em;
}

#sliderScroll_outer{
  width: 40vw;
  background: lightgrey;
  margin: 1em;
}
#sliderScroll{
  width: 0vw;
  height: 10px;
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

<div id="container">

  <div id="slide">
    <img src="https://via.placeholder.com/800x600.png">
    <img src="https://via.placeholder.com/400x600.png">
    <img src="https://via.placeholder.com/1000x600.png">
  </div>

  <div id="sliderScroll_outer">
    <div id="sliderScroll"></div>
  </div>

</div>

以全页模式或CodePen运行

推荐阅读