作者：关注前世男友 | 来源：互联网 | 2023-05-23 11:11
我不确定标题是否清楚,所以解释的话很少.我有几个小元素,比方说div(200pxx 400px常数).在每个内部,有一个段落有大约20行文本.当然,这对于一个可怜的小div来说很重要.我想做的是:
通常div有overflow: hidden属性.
在鼠标over(:hover)上,此属性更改为overflow: auto;,并显示滚动条.
问题是什么？我想在段落文本和滚动条之间留一点空间(填充或边距).让我们说该段有一个对称的margin: 20px;.但是在:hover触发器打开后,会出现滚动条,并且段落的整个右侧都会"scrollbar-width" px向左移动.句子在其他行中被打破,整个段落看起来不同,这非常烦人且不方便用户使用.我怎样才能设置我的CSS,所以悬停后唯一的变化就是scroolbar的外观？
换一种说法:
/* Normally no scrollbar */
div {display: block; width: 400px; height: 200px; overflow: hidden;}
/* On hover scrollbar appears */
div:hover {overflow: auto;}
/* Paragraph margin predicted for future scrollbar on div */
div p {margin: 20px (20px + scrollbarwidth px) 20px 50px;}
/* With scrollbar margin is symmetrical */
div:hover p {margin: 20px;} /* With scrollbar */
我已经为它做了一个小片段,并解决了我的问题strong.我希望一切都很清楚:).我现在正在寻找一个近两个小时的解决方案,所以我认为我的问题非常独特和有趣.
div.demo1 {
width: 400px;
height: 200px;
overflow: hidden;
background: #ddd;
}
div.demo1:hover {
overflow: auto;
}
div.demo1 p {
background: #eee;
margin: 20px;
}
div.demo2 {
width: 400px;
height: 200px;
overflow: hidden;
background: #ddd;
}
div.demo2:hover {
overflow: auto;
}
div.demo2 p {
background: #eee;
margin: 20px 40px 20px 20px;
}
div.demo2:hover p {
margin: 20px 20px 20px 20px;
}
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
As you can see, on hover right side of the paragraph "moves" left. But I want something like:
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
But with a "perfect" scrollbar width (in this example I used 20px)
1> tomtomtom..：
根据浏览器和操作系统,所有滚动条可能不同,因此您必须使用Javascript.
我在这里找到了一个很酷的片段:http://davidwalsh.name/detect-scrollbar-width
这是一个例子:http://jsfiddle.net/a1m6an3u/
js代码创建一个div .scrollbar-measure,查看滚动条的大小并返回它.
它看起来像这样:
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac: 15
// Delete the DIV
document.body.removeChild(scrollDiv);
所以我很快添加了一些jquery代码,但我认为你只能在JS中完成它.
京公网安备 11010802041100号