怎么隐藏滚动条又能滚动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>滚动条隐藏</title>
 6     <style>
 7         body, ul, li {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         body, html {
13             height: 100%;
14         }
15 
16         .outer {
17             position:fixed;
18             top:0;
19             /*外层div宽度比里层小*/
20             width: 100px;
21             /*外层div超出隐藏*/
22             overflow: hidden;
23             bottom:0;
24         }
25 
26         .inner {
27             background: #2d4658;
28             /*里层div宽度比外层大,当外层div多出里层一定的宽度时就能隐藏滚动条*/
29             width: 120px;
30             height: 100%;
31             /*里层滚动属性*/
32             overflow-x:hidden;
33             overflow-y: auto;
34         }
35 
36         .inner ul li {
37             color: #fff;
38             padding: 30px 10px;
39         }
40     </style>
41 </head>
42 <body>
43 <div class="outer">
44     <div class="inner">
45         <ul>
46             <li>item</li>
47             <li>item</li>
48             <li>item</li>
49             <li>item</li>
50             <li>item</li>
51             <li>item</li>
52             <li>item</li>
53             <li>item</li>
54             <li>item</li>
55             <li>item</li>
56             <li>item</li>
57             <li>item</li>
58             <li>item</li>
59             <li>item</li>
60             <li>item</li>
61         </ul>
62     </div>
63 </div>
64 </body>
65 </html>

效果如下:


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Eclipse to android

JDK Eclipse Android SDK ADT 1 必须软件 Java JDK SE 1.6 (jdk-7u9-windows-i586.exe) Eclipse (Eclipse IDE for Java Developers) Google Android SDK (android-sdk_r15-windows.zip) ADT (ADT-15.0.0.zip) 如果找不到可参考&#xff1a; http://blog.csdn.net/zhenyong…

canvas画饼图

<style> body { background: black; text-align: center; } #cans { background: white; } </style> <script> function disToRad(n){//将度数表示弧度计算的方法 return n*Math.PI/180;//π用PI表示&#xff0c;π180&#xff0c;所以1PI/180 } w…

Web设计趋势分析

本文译自网站设计公司weavora.com&#xff0c;介绍了在他们眼里 8 个 Web 设计趋势&#xff1a;单页面、用照片做背景、色块设计、超大号的图片、聚焦简洁、响应式设计、视差滚动、强调字体&#xff0c;每个趋势后面都附了数个案例&#xff0c;相信对网站设计师会有一定的参考价…

使用Jasmine,Spock和Nashorn测试JVM服务器端JavaScript

JavaScript使用不仅限于浏览器中的客户端代码或NodeJS支持的服务器端代码。 许多基于JVM的项目都将其用作内部脚本语言。 测试这种功能既不简单也不标准。 在本文中&#xff0c;我打算演示一种使用成熟的工具&#xff08;例如Jasmine &#xff0c; Spock和Nashorn在服务器端JVM…

带有Hibernate OGM的NoSQL –第一部分:持久化您的第一个实体

Hibernate OGM的第一个最终版本已经发布 &#xff0c;团队从发布狂潮中恢复了一些。 因此&#xff0c;他们考虑建立一系列教程式博客&#xff0c;使您有机会轻松地从Hibernate OGM重新开始。 感谢Gunnar Morling&#xff08; gunnarmorling &#xff09;创建了本教程。 介绍 不…

为自己写程序之JavsScript代码段测试器

JavaScript的测试&#xff0c;通常是在Firefox的firebug插件中测试的。不过有时只是测试几行代码都要写一个html&#xff0c;再打开浏览器测试运行结果&#xff0c;感觉并不是很方便。 今天花了点时间做了一个简易的JS片段测试器。其实这主要是看了IronJs开源项目以后&#xff…

sizeof和strlen的区别(其中涉及NUL的讲解)

本文是自己结合平时所学的知识&#xff0c;对sizeof和strlen的区别进行了总结&#xff0c;如有不对的地方还请批评指证&#xff0c;共同进步&#xff01;&#xff01;&#xff01; 一、从C语言的定义上来讲 1、sizeof是关键字&#xff0c;而strlen是包含在string.h头文件中的一…

使用WildFly和Java EE 7映像与Docker提供者一起流浪

什么是无业游民&#xff1f; Vagrant是创建虚拟开发环境的简化且可移植的方式。 它可与多种虚拟化软件一起使用&#xff0c;例如VirtualBox&#xff0c;VMWare&#xff0c;AWS等。 它还可以与多种配置软件一起使用&#xff0c;例如Ansible&#xff0c;Chef&#xff0c;Puppet或…

休眠锁定模式–乐观锁定模式如何工作

显式乐观锁定 在上一篇文章中 &#xff0c;我介绍了Java持久性锁定的基本概念。 隐式锁定机制可防止丢失更新 &#xff0c;它适用于我们可以主动修改的实体。 虽然隐式乐观锁定是一种广泛使用的技术&#xff0c;但是很少有人了解显式乐观锁定模式的内部工作原理。 当锁定的实…

如何在JMeter中执行客户端Web性能测试?

在本文中&#xff0c;我们将看到如何使用Jmeter插件进行客户端性能测试。 我将使用jmeter webdriver插件。 在开始本主题之前&#xff0c;请从我以前的文章中获得有关客户端性能测试的一些基本信息。 因此&#xff0c;让我们开始吧&#xff1a; 安装 通过这篇文章之后的链接&…

[转载]Buffon投针实验:究竟为什么是pi?

Buffon投针实验&#xff1a;究竟为什么是pi&#xff1f; Brain Storm | 2009-11-06 20:16| 57 Comments | 本文内容遵从CC版权协议 转载请注明出自matrix67.com数学学习真正悲哀的就是&#xff0c;记住了某个神奇而伟大的定理&#xff0c;看懂了其最严密的推导过程&#xff0c;…

初始化懒惰关系以及何时使用它们的5种方法

实体之间关系的延迟加载是JPA中公认的最佳实践。 它的主要目标是仅从数据库中检索请求的实体&#xff0c;并仅在需要时加载相关实体。 如果我们只需要请求的实体&#xff0c;那是一个很好的方法。 但是&#xff0c;如果我们还需要一些相关实体&#xff0c;它会增加工作量&#…

fieldset ----- 不常用的HTML标签

fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包&#xff0c;生成一组相关表单的字段。 当一组表单元素放到 <fieldset> 标签内时&#xff0c;浏览器会以特殊方式来显示它们&#xff0c;它们可能有特殊的边界、3D 效果&#xff…

使用入站适配器公开HTTP Restful API。 第1部分(XML)

1.简介 这篇文章的目的是使用Spring Integration HTTP入站适配器实现HTTP Restful API。 本教程分为两个部分&#xff1a; XML配置示例&#xff08;同一篇文章&#xff09;。 Java DSL示例。 这将在本教程的下一部分中进行说明&#xff0c;展示如何使用Spring Integration Ja…

使用jOOQ和JavaFX将SQL数据转换为图表

最近&#xff0c;我们已经展示了Java 8和函数式编程将如何为使用jOOQ和Java 8 lambda和Streams进行SQL数据的函数数据转换为Java开发人员带来新的视角。 今天&#xff0c;我们将这一步骤更进一步&#xff0c;将数据转换为JavaFX XYChart.Series以根据数据生成美观的条形图。 设…

node.js学习笔记(1)

一&#xff0e; 安装以及环境配置 安装路径 http://nodejs.cn/download/ 多种环境选择 环境变量的配置 Step1 先检查环境变量中的系统变量里面的path,查看是否加入了node.js 例如我的node.js安装路径是C:\Program Files\nodejs 那么&#xff0c;这个path里面就应该加…

主要版本发布后Java开发人员应使用的15种工具

新部署的生存工具包&#xff1a;适用于Java开发人员的工具&#xff0c;这些工具经常将代码部署到生产中&#xff01; Takipi会检测生产中的所有错误&#xff0c;并像发生错误时一样显示变量值 立即部署并获得免费的T恤 适用于新部署的终极生存套件 与在僵尸末日场景下玩弄&…

Java EE 7批处理和魔兽世界–第2部分

今天&#xff0c;我将把第二部分带到我以前关于Java EE 7批处理和《魔兽世界–第1部分》的帖子中。 在本文中&#xff0c;我们将了解如何从第1部分中获得的数据中汇总和提取指标。 概括 批处理目的是下载魔兽世界拍卖行的数据&#xff0c;处理拍卖并提取指标。 这些指标将建立…

js导航条 二级滑动 模仿块级作用域

for(var i 1;i<7;i){    //因为首级标题有6个&#xff0c;对每个首级标题添加mouseover和mouseout事件。    //这里用到块级作用域(function(k){document.getElementById("p_"k).addEventListener(mouseover,function(event){document.getElementById(p_…

struts+swfupload实现批量图片上传(上):swfupload

custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel",uploadButtonId : "btnUpload",myFileListTarget : "idFileList" },custom_settings调用方法 this.customSettings.cancelButtonId 缩略图js …