水平滚动条小于 div 宽度？ + 没有字幕？

Question

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

这是我的 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 - 另一个问题是我想在图像的左下角有一个图形说明。但不知何故，当水平滚动条出现时它不显示。有什么建议吗？

这是我想要的示例：

example image

编辑：现在我终于成功地添加了：

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

但是现在的问题是滚动条不在中间，而是在左边。 Margin:auto 没有帮助。不知道该怎么做。

同时将 img 大小设为 90% 以显示标题，这不是那么糟糕的解决方案。

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

Answer 1

这里有一些与您提供的图片接近的示例。抱歉，但我真的不知道如何在没有 JS 的情况下实现 Pure HTML + CSS标准。我觉得根本不可能。

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

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

对于手机...我为 jQuery-ui 添加了“touch punch”补丁。有关它的更多详细信息 here。我还将“初始化代码”放在一个函数中，因此它可以运行加载和调整大小。

$(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

水平滚动条小于 div 宽度？ + 没有字幕？

Smaller horizontal scrollbar than div width? + No figcaption?

css

scrollbar

horizontal-scrolling