CSS转换在不需要时显示滚动条
阿什温
我们具有增加/减少内容缩放级别的功能。当用户增加缩放比例时，我们将增加css属性的比例transform。当内容放大时，甚至不需要显示滚动条的父div。
请检查下面的代码和小提琴：
HTML：
<div id="viewport">
<div id="zoomDiv">
<p style="width:250px;height:150px;background-color:yellow">
hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j f
</p>
</div>
</div>
<a href="javascript:void(0)" onclick="transformDiv(0.1)" id="increase"> + </a>
<a href="javascript:void(0)" onclick="transformDiv(-0.1)" id="deccrease"> - </a>
<script>
var d = 1;
function transformDiv(n) {
d = d + n;
document.getElementById("zoomDiv").style.transform = "scale("+d+")";
}
</script>
CSS：
#viewport{width:300px;height:200px;border:1px solid #000;background-color:#FFF;overflow:auto}
#zoomDiv{transform}
小提琴：https：//jsfiddle.net/hyvr7bwn/
在所有浏览器中发生的问题。
狮身人面像
我已经更新了您的小提琴，原来它需要以下CSS代码才能正确对齐。这样只会在放大时将内容保留在左侧，这样就不会浪费空间，并且在不需要时不会显示滚动条。
-webkit-transform-origin: top left;
float:left;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Google Maps InfoWindow显示不需要的滚动条（但仅一次）
- 2
调整大小时会显示JavaFX TextArea滚动条，即使不需要
- 3
调整大小时，即使不需要，也会显示JavaFX TextArea滚动条
- 4
删除不需要的水平滚动条（水平滚动条来自何处？）
- 5
数据表和不需要的水平滚动条的问题
- 6
数据表和不需要的水平滚动条的问题
- 7
将滚动条添加到不需要它的页面？
- 8
溢出-x：自动创建不需要的垂直滚动条
- 9
保持QPlainTextEdit尽可能小而不需要滚动条
- 10
编写 iOS 滚动条以解决 Bootstrap 4 轮播错误：单击/点击会导致额外的不需要的滑动
- 11
显示区域的CSS滚动条
- 12
如何仅在需要时显示Bootstrap 3弹出式滚动条
- 13
使用Headroom JS隐藏滚动条上的导航栏并在需要时显示
- 14
使用Headroom JS隐藏滚动条上的导航栏，并在需要时显示
- 15
通过javascript滚动内容时不需要的鼠标事件
- 16
通过javascript滚动内容时不需要的鼠标事件
- 17
CSS，不需要的水平移动滚动
- 18
停止在CSS中生成不需要的滚动
- 19
XML的XSL转换-显示不需要的其他文本
- 20
下载html源代码时不需要的<img>转换
- 21
Bash终端在打开时显示不需要的文本
- 22
单击时突出显示Listview项（不需要）
- 23
流星LogginIn（）在不需要时显示加载
- 24
不需要时显示模型的哈希值
- 25
Bash 终端在打开时显示不需要的文本
- 26
CSS动画延迟显示不需要的内容
- 27
QTableWidget显示滚动条
- 28
设置为展开时，ScrolledComposite不显示滚动条
- 29
全屏div（显示为默认窗口滚动条时）
我来说两句