个人中心
gpt4 book ai didi

javascript - 隐藏导航栏的滚动条并且仍然滚动

转载 作者：搜寻专家 更新时间：2023-10-31 22:55:47 26 4
gpt4 key购买 nike

解释

我有这个 Bootstrap 的导航栏，它有一个水平响应菜单，但它显示的是一个水平滚动条。我在下面列出了一些隐藏/删除(并仍然滚动)此滚动条的尝试，但没有任何效果。

尝试 1: 使用 overflow-x: hidden，但它不会水平滚动。
尝试 2: 使用 ::-webkit-scrollbar {display: none;}，但它只适用于基于 webkit 的浏览器。
尝试 3: 按照 this answer 中的建议，我尝试在下面使用这段代码，但随后子菜单(展开导航时)的大小发生了变化，滚动条仍然在那里。你可以在 this fiddle 中看到它.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

/*I changed overflow-y to overflow-x and padding-right to padding-bottom*/

有什么方法适用于大多数浏览器吗？

示例代码

您还可以在 JSFiddle 上查看.

#navigation {
    background-color: rgba(230, 104, 92, 1);
}

.navbar-toggle i, .navbar-brand, .navbar-nav li a {
    color: #fff;
}

.nav {
    white-space: nowrap;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body id="body">

    <header id="navigation" class="navbar navbar-fixed-top">
        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
                </button>

                <a class="navbar-brand" href="#body">
                    Logo
                </a>

            </div>

            <nav class="collapse navbar-collapse navbar-right" role="navigation">
                <ul id="nav-js" class="nav navbar-nav">
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                    <li><a href="#">Item4</a></li>
                    <li><a href="#">Item5</a></li>
                    <li><a href="#">Item6</a></li>
                    <li><a href="#">Item7</a></li>
                    <li><a href="#">Item8</a></li>
                    <li><a href="#">Item9</a></li>
                    <li><a href="#">Item10</a></li>
                    <li><a href="#">Item11</a></li>
                    <li><a href="#">Item12</a></li>
                    <li><a href="#">Item13</a></li>
                    <li><a href="#">Item14</a></li>
                    <li><a href="#">Item15</a></li>
                </ul>
            </nav>

        </div>
    </header>

    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</body>

</html>

提前致谢，
路易斯。

最佳答案

解决此问题的最佳方法是更改​​菜单结构。由于 dom 树的性质和您拥有的菜单项的数量，您总是会遇到某种溢出问题。解决此问题的最佳方法是考虑您的菜单项将包含哪些内容，然后将它们嵌套。一个例子是:

<ul>
<li>Main A</li>
<li>Main B
  <ul>
    <li>Sub 1 of Main B</li>
    <li>Sub 2 of Main B</li>
  </ul>
</li>
</ul>

从长远来看，让网站可用性和导航固有的溢出属性隐藏项将是一个巨大的难题。此外，您将始终拥有滚动条，因为您打破了包含元素的宽度值，并使其比最高级别的父元素更宽，这意味着没有其他方式可以查看元素。

关于javascript - 隐藏导航栏的滚动条并且仍然滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42610328/

26 4 0
文章推荐： file - nodejs - fs.createReadStream().pipe，如何知道文件大小问题
文章推荐： java - iOS 推送通知的 PHP 和 Java 字符串长度阿拉伯语文本大小问题
文章推荐： node.js - 用于 Express 的 mustache (类)模板引擎？
文章推荐： php - 表情符号用 "<3"替换数组
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com