直接看效果:
<!DOCTYPE html> <html> <head> <title>sdf</title> <style> /* hide scrollbar */ ::-webkit-scrollbar { width: 1px; height: 1px; } ::-webkit-scrollbar-button { width: 1px; height: 1px; } .g-scroll { position: relative; width: 200px; height: 200px; transform-origin: 100% 0; transform: rotate(-90deg); overflow: scroll; } .g-pesudo { width: 200px; height: 400px; background: linear-gradient(rgba(122, 122, 50, .3), rgba(20, 200, 150, .3)); } .g-content { position: absolute; top: 0; left: 200px; width: 400px; height: 200px; transform-origin: 0 0; border: 1px solid #000; transform: rotate(90deg); } </style> </head> <body> <div class="g-scroll"> <div class="g-pesudo"></div> <div class="g-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quis ipsum officiis placeat ipsa sit ad incidunt similique, consequuntur earum architecto recusandae veritatis et illo, illum quae nulla minus rerum? </div> </div> </body>
文章链接:https://segmentfault.com/a/1190000042443056