我需要能够在此页面上使用像这样的滚动效果来显示内容
一探究竟!
知道如何在基于 wordpress 的网站中执行此操作吗?
我不认为你可以用 elementor 或其他一些 wordpress 插件来做到这一点。你需要一些javascript知识,这里有一个关于如何做到这一点的教程:
https://css-tricks.com/pure-css-horizontal-scrolling/
这是codePen中的预览
https://codepen.io/pieter-biesemans/pen/BQBWXX
预览代码:
<div class="horizontal-scroll-wrapper squares">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
<div>item 8</div>
</div>
<style>
$finalHeight: 250px;
$finalWidth: 3 * $finalHeight;
$scrollBarHeight: 1px;
::-webkit-scrollbar {
width: $scrollBarHeight;
height: $scrollBarHeight;
}
::-webkit-scrollbar-button {
width: $scrollBarHeight;
height: $scrollBarHeight;
}
body {
background: #111;
}
div {
box-sizing: border-box;
}
.horizontal-scroll-wrapper {
position: absolute;
display: block;
top: 0;
left: 0;
width: calc(#{$finalHeight} + #{$scrollBarHeight});
max-height: $finalWidth;
margin: 0;
padding-top: $scrollBarHeight;
background: #abc;
overflow-y: auto;
overflow-x: hidden;
transform: rotate(-90deg) translateY(-$finalHeight);
transform-origin: right top;
& > div {
display: block;
padding: 5px;
background: #cab;
transform: rotate(90deg);
transform-origin: righhttps://codepen.io/pieter-biesemans/pen/BQBWXXt top;
}
}
.squares {
padding: $finalHeight 0 0 0;
& > div {
width: $finalHeight;
height: $finalHeight;
margin: 10px 0;
}
}
</style>