如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)

如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)本章给大家介绍用css实现横向滚动条的两种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。html代码:全部Adobe微软会计绘画Adobe微软会计绘画一、原始css+jquery实现横向滚动条(原生js可以实现,为了方便才用的jQuery)css代码:*{box-sizing:border-box;margin:0;padding:0}.nav_wrap{ov…

如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)

本章给大家介绍用css实现横向滚动条的两种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

html代码:

一、 原始css + jquery 实现横向滚动条(原生js可以实现,为了方便才用的jQuery)

css代码:* {

box-sizing: border-box;

margin: 0;

padding: 0

}

.nav_wrap{

overflow-x: scroll;

}

.nav_mine {

padding: 15px 10px;

border-bottom: 1px solid #aca9a7;

height: 75px;

overflow-x: scroll;

overflow-y: hidden;

}

.nav_mine .nav_item {

border: 1px solid #1a110b;

border-radius: 40px;

color: #aca9a7;

margin-right: 10px;

font-size: 24px;

padding: 4px 18px;

float: left;

list-style: none;

}

js代码:$(function(){

var width = 0;

for (let i = 0; i < $(‘.nav_item’).length; i++) {

width += $(‘.nav_item’).eq(i).outerWidth(true);

}

$(‘.nav_mine’).width(width+20); //width只是内容的宽度,需要加上padding的宽度

})

PS:为什么用js,是因为不知道tabs有多少个,不能把宽度写死,只能动态获取tabs的宽度,然后相加,获取总宽度,方便多次使用。outerWidth加上参数true,代表包含了padding+margin+border的宽度。

二 css3 — flex

css代码:* {

box-sizing: border-box;

}

.nav_mine {

padding: 15px 20px;

border-bottom: 1px solid #aca9a7;

height: 75px;

display: flex;

align-items: center;

overflow-y: hidden;

flex-wrap: nowrap;

}

.nav_mine .nav_item {

border: 1px solid #aca9a7;

border-radius: 40px;

color: #aca9a7;

margin-right: 22px;

font-size: 24px;

padding: 4px 18px;

list-style: none;

white-space: nowrap;

}

对于white-space,item在没有用white-space:nowrap时,发现一个问题,在未设定宽度的情况下,一个单词不会换行,而汉字会换行,认为是和display:flex有关系,上网查阅,才知道:white-space是看空格来识别是否换行的,单词是作为一个字符,所以要针对于汉字和英文,都要设置white-space:nowrap不换行。因为汉字和英文的不同,导致所占的宽度不一致,所以要留1到2个像素。

今天的文章如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/27657.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注