如何在 wordpress 中使用滚动条在 div 之间移动?
How to move between divs with the scroll in wordpress?
我需要能够使用此页面上的这种滚动效果来显示内容
看看吧!
知道如何在基于 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>
我需要能够使用此页面上的这种滚动效果来显示内容
看看吧!
知道如何在基于 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>