css技巧 - 如何使用CSS实现页面右起滚动？
CSS如何实现页面右起滚动？
https://book.wy-lang.org/
依如文言阴符经页面的，页面实现右起滚动。
这个的实现好像是用js实现的，有没有办法使用css实现？
共有2个答案
题目中提供的是用JS写的, 监听鼠标滚轮, 滚动条也都是自己写的
用CSS 实现原理就是使用css transform变换，使纵向滚动条横向展示
简单DEMO:
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>scrollx</title></head><style> .rot{ position: absolute; /* 脱离文档流，不占用transform之前的空间 */ background-color: #777; height: 400px; /*宽度*/ transform: rotateZ(-90deg) rotateY(180deg); /* 逆时针旋转90度，再对y轴翻转 */ transform-origin: left top; overflow-x: hidden; } .innerot{ display: flex; /* width: 300px; *//*自动撑开*/ /* height: 30px; *//*自动撑开*/ background-color: 777; transform-origin: left bottom; flex-wrap: nowrap; /*禁止换行*/ /* 内层通过js控制transfrom */ } .pan{ width: 100px; height: 30px; line-height: 30px; flex-shrink: 0; /* 禁止压缩 */ background-color: #777; color: #ddd; border-right: 1px solid #555; padding: 0 6px; } /* 滚动条样式调整 */ .rot::-webkit-scrollbar{ width: 3px; background-color: #777; } .rot::-webkit-scrollbar-thumb{ background-color: #ccc; opacity: 0.5; transition: all ease 1s; } .rot::-webkit-scrollbar-thumb:active{ background-color: #ddd; }</style><body> <div class="rot"> <div class="innerot"> <div class="pan" >1</div> <div class="pan" >2</div> <div class="pan" >3</div> <div class="pan" >4</div> <div class="pan" >5</div> </div> </div></body><script> let innerot = document.getElementsByClassName('innerot')[0]; let rot = document.getElementsByClassName('rot')[0]; rot.style.width = innerot.clientHeight + 3 + 'px'; // 3px 预留滚动条 innerot.style.transform = `translateY(-${innerot.clientHeight}px) rotateZ(90deg) rotateX(180deg) translateY(${innerot.clientHeight}px)`;</script></html>更帅的实现:
https://juejin.cn/post/7247499914913202213
本站前几天有个类似的问题
https://segmentfault.com/q/1010000044418207
可以使用CSS中的 writing-mode 属性实现页面右起滚动。该属性定义了文本的方向，其中 lr-tb（从左到右，从上到下）是默认值，而 rl-tb（从右到左，从上到下）可以实现页面右起滚动。
示例代码如下：
body { writing-mode: vertical-rl; overflow: auto;}这段代码将页面内容旋转为从右到左的垂直方向，并使用 overflow: auto; 属性实现滚动条的自动显示。如果想要隐藏滚动条，可以将 overflow 属性设置为 hidden;。
需要注意的是，该方法可能不适用于所有浏览器，特别是在一些旧版浏览器中可能无法正常工作。因此，在实际应用中需要进行测试和兼容性调整。
-
如上图所示，test元素在创建时会执行动画，那如果要在元素销毁时也执行一次动画，要怎么实现？
-
本文向大家介绍CSS如何实现动画？相关面试题，主要包含被问及CSS如何实现动画？时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。 transition也
-
问题内容： 我正在尝试创建一个纯100％CSS（无jQuery）“返回页首”按钮，但是我希望该按钮仅在访客向下滚动页面时显示。 是否可以通过CSS进行检查？因此，如果访客向下滚动，请显示“返回顶部”按钮。 谢谢！ 问题答案： 通过光标位置确定 一种执行此操作的方法是仅在用户将鼠标悬停在页面本身，标题和导航链接下方的内容上时显示该元素： 您可以在这里看到效果：http : //jsfiddle.ne
-
有大佬知道这种背景渐变色是怎么做到的嘛？ 我尝试过把头部从左向右渐变，但是我做不到图片中左上到左下以及右上到右下那么丝滑的过度
-
问题内容： 我尝试更改滚动条的颜色，但是在这里它不起作用。 CSS： 问题答案： 您可以为webkit使用以下属性，这些属性可以连接到 影子DOM ： 这是一个带有红色滚动条的工作小提琴，基于此页面上的代码解释了这些问题。 使用此解决方案和您的解决方案，您可以处理除Firefox之外的所有浏览器，Firefox在这一点上我认为目前仍需要JavaScript解决方案。
-
问题内容： 有什么办法可以使用CSS从左到右或从下到上更改滚动条的位置？ 问题答案： 仅使用CSS： 左右翻转： 工作小提琴 顶部/底部翻转： 工作小提琴