实现可滚动图像

时间:2019-07-01 作者:Cloudbop

抱歉,如果这个问题的答案是主观的。我想问一下WP-SE会让这更容易原谅。如果我这样问的话,我必须解释为什么我不能更改块标记。

我有一些大(宽)的图像,我想滚动。他们需要有响应性,我也希望他们在整个可滚动图像上有一个边框,标题不可滚动。这排除了将以下css应用于figure.wp-block-image

    <figure class="wp-block-image scrollable"> 
       <img class="wp-img">
       <figcaption>
         Something about the image
       </figcaption>           
    </figure>



   .scrollable{
     border: 5px solid black;
     overflow: auto;
   }
因为标题也会滚动。

我认为有两个现实的潜在选择。

1: 构建一个新的Gutenberg块作为插件。这将使我能够将图像包装在一个div中。我已经在这方面取得了一些成功,但我有点担心如何使用它,因为我不是一个非常有经验的块开发人员,而且它还没有经过测试。也许这太过分了。

2: 不确定这是否可行。稍后我可能会对此提出堆栈溢出问题。我看到过类似的q,但具体是关于文本的。

https://stackoverflow.com/questions/45624147/use-pseudo-element-to-overlay-a-scrolling-div

我可以使用CSS和伪选择器来实现所需的效果吗?IE可滚动图像,但不可滚动标题

整个站点中有很多这样的功能,因此它们工作正常、易于维护和实施是很重要的。

我对古腾堡街区很满意。如果我可以将自己的附加css类应用于基本的img块,那似乎是错误的。

抱歉,如果这个问题不符合社区标准,我知道这确实是一个CSS问题。

1 个回复
SO网友:user12680031

我为图像实现了它,它显示了像pdf viewer这样的容器中的图像列表。。我刚刚覆盖了bloc gallery类的css属性,并添加了一个额外的类。。。

.image-list{
    position: relative !important;
    padding-bottom: 140% !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
}
.blocks-gallery-grid{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    right: 0;
    overflow: hidden;
    overflow-y: scroll;
}
.blocks-gallery-grid::-webkit-scrollbar{
    width: 10px;
}
.blocks-gallery-grid::-webkit-scrollbar-thumb {
    background: #888;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(224, 224, 224);
}

相关推荐

Can I make plugins required?

我正在开发自己的Wordpress主题,将用于多个客户端。它有一个主题选项页面,这样我每次都可以轻松自定义网站,但我也会在我制作的每个网站上使用一些插件(如SEO插件、安全性等)。有没有办法让它们成为“必需的”,这样我就可以得到这些插件的列表,这样当我在新网站上安装主题时就不必在插件目录中找到它们了?