仅通过CSS调整滚动条按钮的位置 [英] Adjust scrollbar button position through CSS only

查看:157
本文介绍了仅通过CSS调整滚动条按钮的位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



是否可以将滚动条按钮(如图中突出显示的那样)稍微低于实际值位置?
我的理解是按钮的最高值与div的最高值相同。基本上,我需要将总滚动条正好放在div的中心。



以下代码对按钮的位置没有影响:

  ::  -  webkit-scrollbar-button {
top:10px;
}


解决方案

滚动条的位置视口是浏览器的问题,不能用HTML / CSS控制。



你最好的选择是在与盒子背景颜色相同的框中添加一个厚边框,并相应地减小宽度/高度。 b
$ b

甚至隐藏滚动条按钮,如:

  ::  -  webkit-scrollbar-button {
width:0;
height:0;
display:none;
}

jsfiddle here: http://jsfiddle.net/4nuoo8vg/


Is it possible to move the scroll bar button(as highlighted in the image) little below its actual position? My understanding is that the top value for the button is same as the top value of the div. Basically, I need the total scrollbar to be placed exactly in the center of the div.

The below code has no effect on the button's position:

::-webkit-scrollbar-button {
     top: 10px;
}

解决方案

The position of the scrollbars for the viewport is a matter for the browser, and can't be controlled with HTML/CSS.

Your best bet would be to add a thick border around the box of same background color as that of the box, and reducing width/height accordingly.

Or even hide scrollbar-button like:

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

jsfiddle here: http://jsfiddle.net/4nuoo8vg/

这篇关于仅通过CSS调整滚动条按钮的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆