Question

我最近一直在一个水平滚动网站上工作，该网站运行良好并且在左右滚动时可以正常运行，但是，当我尝试实现滚动垂直滚动水平功能时，我就开始运行问题。我会尽力解释。

我尝试实现一个以（即fullpage.js）开头的jQuery插件，但它根本没有用，这很好，因为它是我代码中不必要的额外元素。然后，我想也许可以使用JS创建可以触发CSS动画并删除类的东西（例如display:none），几天前我在这里得到了一些帮助，但是代码再次在完整的标记文件中没有为我工作，但我仍在调查原因。

我找到了一个纯CSS垂直于水平的滚动，最终实际上对我有用，并且只使用了很少的代码，这太棒了！实际上，它运行得很好，但是我在部分中失去了全屏元素，我已经尝试过一切可以使我的部分变大的尺寸（通常是100vw x 100%），但是每当我最终将元素返回到滚动功能停止的正常大小，我无法弄清楚为什么会发生这种情况。

昨天我发现宽度x高度的东西弄乱了，因为画布实际上已经旋转到了，我不得不思考相反的方式（即width: 100vh），这很有帮助，但是section元素是然后也挤到width: 100vh吗？另外，我的测试CodePen和“工作”版本中都有很多空白，我知道这是由于旋转后的布局如何引起的，但是我试图弄乱属性，但没有任何帮助它，最终淘汰了我想要的功能。该示例非常基本，但是希望可以让您对如何工作有所了解，因为您也可以看到它很小，我设法使自己的站点工作在100vw，但这是针对整个组件（卡）的部分被压缩为width: 100vh，但包装器没有。.我添加了一些额外的注释代码，作为我玩过的东西。

.horizontal-scroll-wrapper{
  position:absolute;
  display: block;
  top:0;
  left:0;
  width:100vw;
  height: 100%;
  margin:0;
  color: white;
  overflow-y:auto;
  overflow-x:hidden;
  transform:rotate(-90deg) translateY(-100vw);
  transform-origin:right top;
}
.horizontal-scroll-wrapper > .card {
  display:block;
  padding:15px;
  background: black;
  transform:rotate(90deg);
  transform-origin: right top;
}

.h1 {
  color: white;
}


/* .horizontal-scroll-wrapper {
    display: block;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vw;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transform: rotate(-90deg) translateY(-100vh);
    transform-origin: right top;
}

.horizontal-scroll-wrapper > .card {
    flex: 0 0 auto;
    transform: rotate(90deg);
    transform-origin: right top;
}

.horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none;
} */

  <div class="horizontal-scroll-wrapper" id="wrapper">

        <section class="card">
            <div class="row">
                <h1>Section One</h1>
            </div>
        </section>
    
         <section class="card">
            <div class="row">
                <h1>Section Two</h1>
            </div>
        </section>
    
       <section class="card">
            <div class="row">
                <h1>Section Three</h1>
            </div>
        </section>
</div>

纯CSS水平滚动无法正常工作

0 个答案: