PC版模块滚动不显示滚动条效果

以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现。

此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现。

HTML:

<div class="sidebar">
    <div class="sidebar-bd">
        内容
    </div>
</div>

CSS:

.sidebar{
    width: 50px;
    position: fixed;
    top: 0px;
    bottom: 0px;
    background-color: #666a82;
    z-index: 102;
    overflow-x: hidden;
}
.sidebar .sidebar-bd{
    width: 70px;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}

以上代码的效果是左侧固定的竖条,当内容超过一屏的时候,可滚动。

原理是外层限制宽度,设置超过部分隐藏;内层宽度增加20px,滚动条显示在增加的20px里,因为外层限制了显示宽度,所以有滚动条的时候就不会显示出来。

这个方法兼容IE8及以上。

时间: 2024-10-10 17:11:56

PC版模块滚动不显示滚动条效果的相关文章

axure 制作滚动效果(不显示滚动条)

笔者在上一篇文章<axure制作app侧滑菜单>中介绍了淘宝app筛选菜单的制作方法,但筛选菜单中的内容仅仅填充了"一屏"的内容,如果内容比较多,就需要菜单能够上下滚动,且仅仅是菜单部分滚动,其他商品列表部分(背景)无需滚动,本文介绍一下实现方法: 上篇<axure制作app侧滑菜单>博文地址: http://pmdrx.blog.51cto.com/11810835/1911380 要是实现局部滚动,动态面板即可实现,但动态面板的滚动条是不能隐藏的,这个时候我

禁止浏览器滚动条滚动,但滚动条可以显示

最近写一个类似土豆播放器选集数的滚动条,需要的效果是当鼠标位于选择集数的div中时只能滚动该div的滚动条,但是浏览器滚动条禁止滚动~ 网站找了很多方法都是直接隐藏滚动条,最终找到下面方法 代码: var keys = [37, 38, 39, 40]; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } fun

窗口滚动到当前元素才显示动画效果

1 $(function(){ 2 $(window).scroll(function(){ 3 var curr_element = $('当前元素class或id名') 4 var active_class = '显示动画效果的class或id' 5 var scroll_h = $(window).scrollTop()+$(window).height(); 6 var self_top = curr_element.offset().top; 7 var self_h = curr_e

CSS-界面滚动时不显示滚动条

设置滚动条的样式: div::-webkit-scrollbar { width: 0; } 关于::-webkit-scrollbar ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. CSS滚动条选择器 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条

【JavaScript】通过JavaScript的方式,如果手机浏览器访问PC版页面,自动跳转到手机版页面

这个其实根本不用自己写,因为在网上就有一个写的非常不错的js. 做到如下效果,如果是PC.平板访问这个页面,则显示PC版的页面,如果是手机访问这个页面则跳到手机版的页面,同时不加载PC版页面,直接跳转. 首先,目录结构如下: 其中JS文件夹中的uaredirect.js是从网上down下来的,其代码如下: function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var b=false;i

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

Android 仿QQ浏览器WebView,滑动隐藏显示ActionBar效果

Android 仿QQ浏览器,滑动隐藏显示ActionBar效果. 往上推,是一个ScrollView会将,actionbar以及内容往上推,当actionbar消失后,将滚动Webview的内容. 此效果是基于QuickReturnHeader源码,修改而来的,代码也不多,实现方法比较简单. 直接上demo:http://download.csdn.net/detail/xufeifandj/8388493 直接看效果图:

基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面效果. 2.插件源代码: /* * 作者:孟繁贵 * 2017-08-25 * 版本:1.0 */ jQuery.anchorScroll = function(elem1, elem2) { var currObj, offsetTop = 0, h2List = new Array(), h3L

div超出内容后自动显示滚动条

只需要用到css的一个overflow:auto的属性就可以实现这效果了.下面我们看看代码和实现的效果 HTML代码如下: <textarea name="" id="message" cols="30" rows="10" placeholder="" maxlength="2000" style="overflow: auto;" class="&