怎么隐藏overflow-x: auto下面的滚动条

深碍√TFBOYSˉ_ 2022-05-17 00:19 353阅读 0赞

//温馨提示：此代码实现的效果只能在开发者工具的移动端页面，才能实现滚动效果

//html代码，

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="./css/style.css">

</head>

<body>

<div class="scrollx mescroll-touch-x">

<nav id="scrollxContent" class="scrollx-content">

<ul id="nav" class="nav">

<li class="active">推荐</li>

<li>视频</li>

<li>热点</li>

<li>社会</li>

<li>娱乐</li>

<li>军事</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

</ul>

</nav>

</div>

</body>

</html>

//css代码

// 导航

.scrollx\{

overflow: hidden;

position: relative;

// 先给总的盒子设置一个高度

height: 0.6rem;

.scrollx-content\{

width: 100%;

// 再在子集盒子设置overflow-x: auto;让盒子水平方向具有滚动效果

overflow-x: auto;

// 禁止换行

white-space: nowrap;

// height: .6rem;

background:@navBGColor;

border: .01rem sloid @navBDColor;

// overflow: hidden;

ul\{

padding: 0 16px 0 10px;

li\{

display:inline-block;

font-size: .25rem;

line-height: .59rem;

padding:0 .2rem;

margin-bottom: 30px;

&.active\{

color:@navActiveFontColor;

\}

\}

\}

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，353人围观）

还没有评论，来说两句吧...

相关阅读

相关 css隐藏滚动条

> 有时候利用形成了滚动条后，我们要保留它的功能，且隐藏它的滚动条。 scrollbar-width: none;//火狐 -ms-overflow-

一时失言乱红尘/ 2023年07月03日 10:59/ 0 赞/ 50 阅读

相关隐藏div滚动条

溢出隐藏，写两个div，高度都固定，外面的固定宽度overflow: hidden;里面的div宽度比外面的稍宽，最好算好滚动条的宽度，[overflow-y][]: auto

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 02:16/ 0 赞/ 41 阅读

相关怎么隐藏滚动条又能滚动

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT

落日映苍穹つ/ 2023年06月11日 14:23/ 0 赞/ 27 阅读

相关火狐滚动条隐藏

.scroll-div { /隐藏滚动条，当IE下溢出，仍然可以滚动/ -ms-overflow-style: none; /火狐下

心已赠人/ 2023年06月06日 15:26/ 0 赞/ 18 阅读

相关隐藏网页的滚动条

要隐藏网页的滚动条，代码如下：方法一： <body style="overflow-x:hidden;overflow-y:hidden" > </body> 方法二

雨点打透心脏的1/2处/ 2022年08月26日 14:29/ 0 赞/ 299 阅读

相关滚动条的隐藏

<template> <el-container> <div class="zhl-scroll-sider" :style="{heigh

逃离我推掉我的手/ 2022年05月25日 03:16/ 0 赞/ 348 阅读

相关怎么隐藏overflow-x: auto下面的滚动条

//温馨提示：此代码实现的效果只能在开发者工具的移动端页面，才能实现滚动效果 //html代码， <!DOCTYPE html> <html lang="en"> <h

深碍√TFBOYSˉ_/ 2022年05月17日 00:19/ 0 赞/ 354 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 471 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

1. 1. 主要代码：　　ul ::-webkit-scrollbar\{

Bertha 。/ 2021年10月23日 07:13/ 0 赞/ 515 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： :

╰+哭是因爲堅強的太久メ/ 2021年07月04日 21:32/ 0 赞/ 712 阅读