html – 隐藏仅在Windows上显示的无用滚动条

概述我的导航栏中有一个引导下拉列表,显示通知列表.它是非常标准的代码,除了我设置max-height：300px;和溢出-y：滚动;在ul元素上.在Chrome或Firefox的Mac上查看时,在高度达到>之前不会出现滚动条. 300px和ul溢出滚动.但是在 Windows(Chrome或IE)上,垂直滚动条始终存在,这真的很烦人.有没有办法关闭Windows上的滚动条或隐藏它直到它实际需要？ 以下 我的导航栏中有一个引导下拉列表,显示通知列表.它是非常标准的代码,除了我设置max-height：300px;和溢出-y：滚动;在ul元素上.在Chrome或firefox的Mac上查看时,在高度达到>之前不会出现滚动条. 300px和ul溢出滚动.但是在 Windows(Chrome或IE)上,垂直滚动条始终存在,这真的很烦人.有没有办法关闭windows上的滚动条或隐藏它直到它实际需要？

以下是下拉列表的代码：

<li >    <div  >        <div  ID="dropdownMenuNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            <i  ng- ></i>&nbsp;            <div  ng-if="unreadNotices > 0">{{unreadNotices}}</div>        </div>        <ul  aria-labelledby="dropdownMenuNotifications">            <li>                <a href="#" ><span>Notifications</span></a>            </li>            <li ng-if="notices.length === 0">                <a href="#" >                    <div >                        <span>No notifications at the moment</span>                    </div>                </a>            </li>            <li ng-repeat-start="n in notices" ng-if="!n.read">                <a href="#"  ng-if="n.action" ng-click="markRead(n,$index);setTab(n.action)">                    <div >                        <i  ng-></i>                    </div>                    <div >                        <span>{{n.Title}}</span>                        <br />                        {{n.text}}                    </div>                    <div >                        <i  ng-click="$event.stopPropagation();delete(n,$index)"></i>                    </div>                </a>                <a href="#"  ng-if="!n.action" ng-click="markRead(n,$index)">                    <div >                        <i  ng-></i>                    </div>                    <div >                        <span>{{n.Title}}</span>                        <br />                        {{n.text}}                    </div>                    <div >                        <i  ng-click="$event.stopPropagation();delete(n,$index)"></i>                    </div>                </a>            </li>            <li ng-repeat-end="n in notices" ng-if="n.read">                <a href="#" ng-if="n.action" ng-click="setTab(n.action)">                    <div >                        <i  ng-></i>                    </div>                    <div >                        <span>{{n.Title}}</span>                        <br />                        {{n.text}}                    </div>                    <div >                        <i  ng-click="$event.stopPropagation();delete(n,$index)"></i>                    </div>                </a>                <a href="#" ng-if="!n.action">                    <div >                        <i  ng-></i>                    </div>                    <div >                        <span>{{n.Title}}</span>                        <br />                        {{n.text}}                    </div>                    <div >                        <i  ng-click="$event.stopPropagation();delete(n,$index)"></i>                    </div>                </a>            </li>        </ul>    </div></li>

这是下拉列表的CSS：

.notifIEr {    &:hover {        background: initial!important;    }    .dropdown-toggle {        .dropdown-link {            padding: 5px 7px 5px 0px;            i {                margin-top: 0;                Font-size: 1.5em;            }        }        .dropdown-items {            max-height: 300px;            overflow-y: scroll;            li {                Font-size: 0.9em;                a {                    position: relative;                    max-wIDth: 300px;                    white-space: normal;                    border-bottom: 2px solID #EEE;                    &.unread {                        background: rgba(92,184,92,0.07);                        color: #333;                    }                    &.Title {                        text-align: center;                        background: #FFF;                        cursor: default;                        &:hover {                            background: #FFF;                        }                    }                    &:hover {                        background: #F7F7F7;                    }                    .notice-text {                        margin-left: 24px;                        margin-right: 15px;                        span {                            Font-size: 1.1em;                            Font-weight: 700;                        }                    }                    .delete-notice {                        position: absolute;                        top: 5px;                        right: 0;                        Font-size: .9em;                        &:hover {                            color: #C9302C;                        }                    }                }            }        }    }}.counter {    position: absolute;    top: 0px;    right: 5px;    padding: 0px 5px 0px 5px;    border-radius: 5px;    Font-size: .5em;    Font-weight: 700;    color: #FFF;    background: #C9302C;}

解决方法 将滚动更改为：

overflow-y: auto;

如果只需要滚动条,则将其设置为自动将显示滚动条,而滚动则表示应始终存在滚动条.

您可以使用this example玩不同的溢出属性或在w3schools阅读更多相关信息.

–

虽然您可以考虑使用-ms-overflow-style属性,您可以在windows dev center中找到它：

-ms-overflow-style: auto | none | scrollbar | -ms-autohIDing-scrollbar

总结

以上是内存溢出为你收集整理的html – 隐藏仅在Windows上显示的无用滚动条全部内容，希望文章能够帮你解决html – 隐藏仅在Windows上显示的无用滚动条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。