纯CSS设置滚动条位置调整在左侧或者在上方 滚动条位置在左侧 // 实现原理 // 设置父元素的文字方向为从右到左 direction: rtl; // 让所有子元素的文字方向从左到右 direction: ltr; // css #son { direction: ltr; } #father { width: 400px; height: 200px; border: 1px solid aqua; overflow-y: scroll; direction: rtl; } .item { height: 80px; border: 1px solid #eee; } // html <div id="father"> <div id="son"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </div>

效果图：

滚动条位置在上方 // 实现原理 // 将父元素上下翻转 transform: scaleY(-1); // 再将子元素上下翻转回来 transform: scaleY(-1); // html <div id="father"> <div id="son"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam iste dolorum inventore ab possimus assumenda esse unde fugiat sunt doloribus facere excepturi cupiditate facilis dolor voluptate cum veniam neque officia. </div> </div> // css #son { width: 500px; transform: scaleY(-1); } #father { transform: scaleY(-1); width: 300px; overflow-x: scroll; }

效果图：

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。