`
zhuqinglin
  • 浏览: 27583 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

纯css,div隐藏滚动条,保留鼠标滚动效果。

    博客分类:
  • Java
阅读更多
  1. .nav_wrap{  
  2.     height400px;  
  3.     width200px;  
  4.     overflowhidden;  
  5.     border1px solid #ccc;  
  6.     margin20px auto;  
  7. }  
  8. .nav_ul{  
  9.     height100%;  
  10.     width220px;  
  11.     overflow-y: auto;  
  12.     overflow-x: hidden;  
  13. }  
  14. .nav_li{  
  15.     border1px solid #ccc;  
  16.     margin-1px;  
  17.     height40px;  
  18.     line-height40px;  
  19.     text-aligncenter;  
  20.     font-size12px;  
  21.     width200px;  
  22. }  
  23. .btn_wrap{  
  24.     text-aligncenter;  
  25. }  
  1. <div class= "nav_wrap">  
  2.     <ul class= "nav_ul">        
  3.         <li class="nav_li">我是菜单1</li>  
  4.         <li class="nav_li">我是菜单2</li>  
  5.     </ul>  
  6. </div>  
  7. https://blog.csdn.net/liusaint1992/article/details/51277751

 

分享到:
评论

相关推荐

    一款好看的DIV+CSS滚动条

    标题提及的"一款好看的DIV+CSS滚动条"是指利用这种方法创建的自定义滚动条,它可以提升网站的用户体验和视觉吸引力。 滚动条通常在内容超过容器显示范围时出现,允许用户浏览隐藏的部分。在默认情况下,浏览器会...

    纯CSS实现的表格滚动条效果

    本主题聚焦于如何使用纯CSS技术来实现一个既美观又实用的表格滚动条效果。这种效果可以让用户在不改变表格整体布局的情况下,优雅地浏览表格中的所有内容。 首先,我们来探讨CSS在创建滚动条样式上的关键属性。CSS3...

    纯CSS实现隐藏滚动条但仍具有滚动的效果(移动端和pc端)

    移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    如果希望在某些情况下隐藏滚动条,可以使用`overflow: hidden;`: ```css div { width: 200px; height: 200px; overflow: hidden; } ``` 然而,CSS3引入了新的特性和伪元素,使得我们可以进一步定制滚动条的...

    鼠标滚动div内容

    设置`overflow: auto`或`overflow: scroll`将使div显示滚动条,让用户能够查看隐藏的内容。 2. **JavaScript事件监听** JavaScript提供了事件监听功能,例如`addEventListener`,用于在用户滚动鼠标时触发相应的...

    全屏焦点图片无滚动条 css3动画特效 图片随鼠标移动而移动

    在本项目中,我们主要探讨的是如何利用CSS3和HTML5技术实现一个全屏焦点图片展示效果,其中图片能够随着鼠标的移动而平滑地移动,同时无滚动条设计使得用户体验更加流畅。以下是对这个主题的详细解释: 一、全屏...

    CSS实现隐藏滚动条并可以滚动内容效果(三种方式)

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。 方法1:计算滚动条...

    拖动div 内部有滚动条

    1. **CSS样式设定**:首先,为 `div` 设置合适的宽度、高度和溢出隐藏(`overflow: auto` 或 `overflow-y: scroll`),以便在内容过多时自动出现滚动条。同时,可能需要设置边框、内边距和外边距以美化布局。 2. **...

    vue.js-div滚动条隐藏但有滚动效果的实现方法

    在开发前端页面时,经常会有需要隐藏滚动条但保留滚动功能的场景,这样的设计可以让页面看起来更加简洁美观,同时也使得用户能够继续享受滚动带来的便捷。在Vue.js框架中,我们可以通过一些方法来实现这样的效果。 ...

    div css 滚动条样式 DIV滚动条属性及样式设置方式

    例如,以下代码会让一个`div`元素在水平方向显示滚动条,而在垂直方向隐藏滚动条: ```css .testDiv { overflow-x: scroll; overflow-y: hidden; } ``` 接下来,我们可以进一步定制滚动条的样式。CSS提供了多种...

    JS+DIV无缝滚动代码

    `hidden`值表示如果内容被修剪,则浏览器会隐藏滚动条。 - `white-space:nowrap;`:该属性用于定义如何处理空白以及何时换行。`nowrap`值表示即使内容超出容器宽度也不换行。 #### 1.2 JavaScript基础 - **事件...

    使用CSS实现无滚动条滚动的两种方法

    理想的情况是隐藏滚动条的同时保留鼠标滚动的功能,这就涉及到无滚动条滚动的实现方法。 当前大多数的解决方案都是使用CSS的overflow属性,比如overflow:hidden或overflow-y:no,但这样会隐藏掉所有滚动内容,这并...

    css单条信息滚动效果

    "css单条信息滚动效果"是指利用CSS技术实现一条信息在页面上持续滚动展示的效果,常用于新闻更新、公告或者滚动广告等场景。这种效果可以增加信息的可见性和吸引力,尤其在有限的空间内展示大量信息时非常实用。 ...

    css鼠标移入翻转效果

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是鼠标移入时的翻转效果。这种效果能够增加用户与页面的互动性,使信息展示更加生动有趣。本文将详细介绍如何利用CSS3...

    css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    在本文中,我们将深入探讨如何使用CSS来设置滚动条的颜色、样式,以及如何隐藏或去掉滚动条。 首先,让我们来看如何自定义滚动条的颜色和样式。在现代浏览器中(如Chrome、Firefox和Safari),可以通过`::-webkit-...

    js 无缝滚动,鼠标放上去暂停代码

    - **容器`#demo`**:作为外部容器,设置为固定高度(200px)和宽度(600px),并隐藏溢出内容,以实现滚动效果。 - **内容区域`#demo1`**:包含实际要滚动的内容。 - **副本区域`#demo2`**:复制`#demo1`的内容,...

    JQuery+DIV自定义滚动条样式的具体实现

    JQuery结合DIV自定义滚动条样式的具体实现是一个在Web前端开发中经常会遇到的场景,开发者需要使用jQuery库以及纯CSS或JavaScript技术来实现自定义的滚动条效果。以下知识点将详细介绍这种技术实现的原理和方法。 ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    jQuery+mousescroll.js自定义美化div滚动条插件.zip

    总结,jQuery+mousescroll.js插件为开发者提供了一种方便、灵活的方式来美化和定制div滚动条,提升网页的视觉效果和交互体验。通过理解和实践,开发者可以将这种技术运用到自己的项目中,创造出更具吸引力的网页界面...

Global site tag (gtag.js) - Google Analytics