`

鼠标滚动保留去除滚动条

阅读更多

*、有时候出现的滚动条真的好难看,尤其是美工不在,而你又想保留鼠标滚动而去除掉难看的滚动条时,你可以这样做:

 

*、页面结构

<div>  
    <ul >        
        <li >1</li>  
        <li >2</li>  
        <li >3</li>  
        <li >4</li>  
        <li >5</li>  
    </ul>  
</div> 

 

*、css如下

div{  
    height: 100px;  
    width: 50px;  
    overflow: hidden;  
}  
ul{  
    height: 100%;  
    width: 70px;  
    overflow-y: auto;  
    overflow-x: hidden;  
}  

 

到这里,有用但难看的滚动条就隐藏掉了,啊哈哈哈~

但是你看到重点了吗?

对,就是ul的宽度要大于外层div的宽度

至于原理嘛,ul的滚动条在最右侧,当宽度超出div时,嘿嘿,div的overflow:hidden就把可恶的滚动条给“吃”了,对,吃掉了!!!

啊哦~

分享到:
评论

相关推荐

    invisible-scrollbar:隐藏滚动条但保留其功能

    在网页设计中,有时我们希望页面看起来更简洁,去掉那些不必要元素,比如滚动条。但是,滚动条作为用户导航长内容的重要工具,完全移除可能会导致用户体验下降。在这种情况下,“隐藏滚动条但保留其功能”就是一个很...

    Sly滚动条简明demo

    2. **全尺寸和半尺寸模式**:可以选择显示全尺寸的滚动条或仅在鼠标悬停时显示。 3. **无限循环**:可设置内容无限循环滚动,增加用户的浏览乐趣。 4. **动态加载**:根据视口大小和位置,Sly可以智能地加载内容,...

    CSS-day06 (2).pptx

    超出自动显示滚动条,不超出不显示滚动条。 实际开发场景: * 清除浮动。 * 隐藏超出内容,隐藏掉,不允许内容超过父盒子。 1.4 显示与隐藏总结 属性 | 用途 -----|------ display | 隐藏对象,不保留位置。 ...

    html技巧代码

    - `overflow-y:hidden`:隐藏垂直滚动条,保留水平滚动。 - `overflow-x:hidden`:隐藏水平滚动条,保留垂直滚动。 - `scroll="no"`:在`&lt;body&gt;`标签中使用此属性可禁止任何方向的滚动条显示。 2. **表格单元格...

    网页设计常用代码荟萃.pdf

    这行代码会使页面保留水平滚动条,但隐藏垂直滚动条。 3. **让表单输入框获取焦点**: 当页面加载或特定事件触发时,可以通过JavaScript使表单元素自动获取焦点。例如: ```html ();"&gt; ``` 或者使用文档...

    2021-2022计算机二级等级考试试题及答案No.15809.docx

    - 拖动滚动条时,释放鼠标后会触发`Scroll`事件。 - 滚动条控件有一个`Enable`属性,用于控制控件是否可用。 2. **计时器控件**: - 计时器控件在运行时是不可见的,这意味着用户界面上不会显示该控件。 - 计时...

    WPF的TextBox显示为一条横线

    在我们的例子中,我们需要创建一个新样式,设置TextBox的BorderThickness为0,以去除边框,然后添加一条下划线。 下面是一个简单的示例,展示了如何创建一个具有下划线的TextBox样式: ```xml xmlns=...

    电脑故障维修大全-整理版.docx

    2. **减少开机滚动条时间**:将`HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\MemoryManagement\PrefetchParameters`下的`EnablePrefetcher`键值改为1,可以减少开机时的滚动条滚动时间。...

    2021-2022计算机二级等级考试试题及答案No.12641.docx

    7. 控件与事件:滚动条的Change事件在Value改变时触发,Scroll事件在滚动条被滚动时触发,而不是释放鼠标时。选项B错误,正确的事件是当滚动停止时触发Scroll事件。 8. SQL表定义:deptno被定义为主键,所以它的值...

    交互组件微创新 让网站用户体验增色的方法

    例如,Google Wave对滚动条进行了重构,将上下按钮与滑块合并,减少了鼠标移动距离,但同时也带来了滑块无法随按钮运动的问题。为解决这个问题,它们引入了半透明灰色块和终止条来指示位置和比例。尽管这种创新提升...

    电脑故障维修大全-整理版.pdf

    2. 减少开机滚动条时间:修改注册表中的EnablePrefetcher键值为1,可减少开机滚动条的显示时间,从而加快启动速度。 3. 提高开机速度:设置自动结束任务,修改HKEY_CURRENT_USER\Control Panel\Desktop下的...

    web前端面试题2.doc

    - 控制内容溢出元素边界的行为,可设置为`visible`(默认,内容显示)、`hidden`(隐藏溢出内容)、`scroll`(显示滚动条)或`auto`(需要时显示滚动条)。 4. **IE中文字超出显示省略号**: 使用CSS样式`...

    JavaScript 经典代码大全

    这段代码用于隐藏页面的垂直滚动条,同时保留水平滚动条。这对于某些设计上需要隐藏滚动条的页面非常有用。 ### 16. 去除链接图片的蓝色边框 ```html ()"&gt;&lt;img src="logo.jpg" border="0"&gt;&lt;/a&gt; ``` 通过`onFocus`...

    AXURE9最新版,小版本号3646,序列号可用(win版本)

    6. 浏览器中查看移动端原型时,优化光标显示效果,增加上下滚动条。 最后的小结 从整体上来看,AxureRP 9.0针对8.0的版本迭代还是做出了很大的改进,简洁的界面设计,元件的新增功能,以及一些操作流程的优化改进,...

    html特效代码大全.pdf

    19-20) **帖子背景**:`&lt;body&gt;`标签的`background`属性用于设置背景图片,`bgproperties=fixed`使背景固定不随滚动条移动。 21) **帖子背景颜色**:`bgcolor`属性设置页面的背景颜色。 22) **帖子背景音乐**:`...

    九月计算机考试二级VB真题及答案.pdf

    - 滚动条操作:Value属性值在向左移动时增加。 - 静态变量:Static varaible在多次调用同一过程时保留其值,如`numa = numa + 2`。 这些知识点涵盖了计算机等级考试二级VB的主要内容,包括数据结构、算法分析、...

    Graph And Chart 1.51 - 3D图表制作.rar

    馅饼物品可以挤压,去除和控制个体或集体。 3D饼图可以在边缘平滑。一切都可以定制。 * 2D / 3D响应图表,包含多个类别,线条填充和点标记。支持线条和曲线。用鼠标悬停自动动画。所有可视组件均可使用您自己的尺寸...

    2021-2022计算机二级等级考试试题及答案No.3474.docx

    6. Word文档的滚动条允许用户在文档中垂直滚动,方便查看内容。 7. `?round(3.14159,2)`会返回3.14,是数值表达式;`?at("fox","VisualFoxpro6.0")`返回找到"fox"的位置,也是数值;`?chr(13)`返回回车符,不是数值...

    网际畅游 MyIE 3.0 源代码

    不过必须保留一个web代理。 使用多个代理服务器:你可以在一个MyIE浏览器中使用一个代理服务器, 然后再开一个MyIE浏览器使用别的代理服务器或不用。 这样你可以一边浏览国内的网站, 一边用代理服务器浏览国外的...

    2021-2022计算机二级等级考试试题及答案No.10186.docx

    - **描述**:自然连接是一种特殊的连接操作,它仅保留两个表中具有匹配值的行,并且自动去除重复的列。 ### 8. 数据库设计阶段 - **知识点**:数据库设计的不同阶段。 - **描述**:数据库设计分为需求分析、概念...

Global site tag (gtag.js) - Google Analytics