discuz做商城网站,论坛网站建设方案,网页制作与网站建设答案,公司变更地址流程各种学习后的知识点整理归纳#xff0c;非原创#xff01; ① direction属性 滚动条在左侧显示② transform:scaleY() 滚动条在上侧显示 正常的滚动条会在内容超出规定的范围后在区域右侧和下侧显示在有些不正常的需求下会希望滚动条在上侧和左侧显示自己没有想到好的解决方案… 各种学习后的知识点整理归纳非原创 ① direction属性 滚动条在左侧显示② transform:scaleY() 滚动条在上侧显示 正常的滚动条会在内容超出规定的范围后在区域右侧和下侧显示在有些不正常的需求下会希望滚动条在上侧和左侧显示自己没有想到好的解决方案在网上找到了答案记录一下 ① direction属性 滚动条在左侧显示 direction:设置文本的方向 rtl 表示从右到左 ltr 表示从左到右。 使用direction属性将父元素设置为从右到左rtl。在使用direction属性将内容的子元素设置为从左到右ltr。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titletest scroll/titlestyle.wrapper {width: 400px;height: 400px;overflow: auto;direction: rtl; /* 设置内容从右到左 */}.content {width: 400px;height: 400px;direction: ltr; /* 设置内容从左到右 */}/style
/headbodydiv classwrapperdiv classcontentp 测试文字/p1假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容2假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容...../div/div/body/html② transform:scaleY() 滚动条在上侧显示
使用transform:scaleY(-1) 属性将父元素上下翻转在使用transform:scaleY(-1) 属性将父元素上下翻转回来
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titletest scroll/titlestyle.wrapper {width: 400px;height: 400px;overflow: auto;direction: rtl; /* 设置内容从右到左 */transform: scaleY(-1); /* 设置父元素上下翻转 */}.content {width: 400px;height: 400px;direction: ltr; /* 设置内容从左到右 */transform: scaleY(-1); /* 设置父元素上下翻转回来 */}/style
/headbodydiv classwrapperdiv classcontentp 测试文字/p1假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容2假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容3假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容假设这里是很长的内容....../div/div/body/html总结两种方法其实原理一致就是设置父元素为一个相反的方向上左再设置显示内容的外层元素为翻转方向下、右。 相关链接 纯CSS设置滚动条位置调整在左侧或者在上方
