如何在wordpress中使用滚动在div之间移动？ [关闭]答案

【问题标题】：How to move between divs with the scroll in wordpress? [closed]如何在wordpress中使用滚动在div之间移动？ [关闭]
【发布时间】：2018-12-06 19:27:43
【问题描述】：

我需要能够在此页面上使用类似这样的滚动效果来显示内容

http://www.quoplus.com/

看看吧！

知道如何在基于 wordpress 的网站中执行此操作吗？

【问题讨论】：

标签： javascript jquery wordpress elementor

【解决方案1】：

我认为您不能使用 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>

【讨论】：