网上搜了很多关于隐藏滚动条的文章,发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说。本文章将介绍3种隐藏滚动条的方法,大家可以结合实际情况,参考文章内容。

纯DIV+CSS方法

在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。该方法兼容所有浏览器。

<div class="outer-container">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div> .outer-container{
overflow: hidden;
width: 200px;
}
.container{
overflow-x: hidden;
overflow-y: scroll;
width: 220px;
height: 100px;
background-color: yellow;
}

CSS3 自定义滚动条的伪对象选择器

css3有一个直接调用的css,保证隐藏滚动条的同时还可以继续通过滚轮向下翻。

::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}

但是仅限于支持css3的浏览器。如要兼容PC 其他浏览器(IE、Firefox 等),请选择第一种方法。

原生js操作DOM

用鼠标事件调用document.getElementById("xxx").style.overflowY = 'scorll',直接用overflow-y = 'scorll'会报错,因为javascript把overflow和y之间的- 当作了减运算符,overflow解释成style的属性,y成了一个变量;那怎样解决这个问题呢?DOM里采用了Camel记号来解决这个问题,把overflow-y改写成overflowY即可。

#asider{
overflow: hidden;
width: 200px;
height: 100px;
} <div id="asider" onmouseover="toggle1()" onmouseout="toggle2()">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
<li>菜单7</li>
</ul>
</div> <script type="text/javascript">
function toggle1() {
document.getElementById('asider').style.overflowY='scroll';
}
function toggle2() {
document.getElementById('asider').style.overflowY='hidden';
}
</script>

如何隐藏scroll-Y纵向滚动条,并不影响内容滚动的方法的更多相关文章

  1. 控制DIV内容滚动的方法,实现不用拖滚动条就可以看到最新消息

    三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv ...

  2. 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

    对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...

  3. 隐藏浏览器body的滚动条,并进行滚动

    在使用html2canvas插件的时候,发现截图完成后右侧区域被覆盖了一点,后面才发现是滚动器占了位置 网上有些解决滚动条的方法,不过他们都是相对盒子的,而我这个是对body的 最终发现引用下面这个c ...

  4. DIV实现纵向滚动条overflow-y

    DIV实现纵向滚动条overflow-y:scroll的使用, 1.首先设置固定div的宽高2.overflow-y:scroll如果设置overflow:auto;表示当你内容超过div高度出现滚动 ...

  5. 浏览器滚动条及其影响 calc()

    1.浏览器滚动条 默认风格各异,推荐一插件  mCustomScrollbar 不考虑兼容也可自定义样式    链接二 2.影响 以垂直方向为例,当内容变化的时候,如果设置的是overflow:aut ...

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

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

  7. CSS 实现隐藏滚动条同时又可以滚动(转)

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  8. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

  9. 如何实现 antd table 自动调整可视高度(纵向滚动条,scrollY)

    一.事情的起因 最近在做的项目中有大量的表格,正常的表格高度是没有限制的,数据量很大的时候会出现表格内容以及分页信息超出可视窗口, 为了查看超出的部分就需要滚动页面但是这样就会把查询条件等信息滚出可视 ...

随机推荐

  1. Js和Jquery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...

  2. numpy.hstack(tup)

    numpy.hstack(tup) Stack arrays in sequence horizontally (column wise). Take a sequence of arrays and ...

  3. xampp配置多域名

    重要的事情: 前提: vhost.conf被引入 修改两个文件,文件所在路径,看图片上sublime编辑器,hosts和vhost.conf配置的域名必须一致 参考文档:http://blog.csd ...

  4. easyui,获取tabs标签页内容,以及刷新datagrid

    因为先点开tab页xxx查看表格,再点另一个tab页xxxx修改部分信息,再切换到tab页xxx,tab页xxx里的datagrid表格不会刷新,显示不了修改的信息(在此tab页按F5刷新可以解决,但 ...

  5. Git忽略文件的三个办法

    方法一(并不好用) 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规 ...

  6. Python3 A*寻路算法实现

    # -*- coding: utf-8 -*- import math import random import copy import time import sys import tkinter ...

  7. laravel5.8 Models

    <?php namespace App\Models; use Illuminate\Notifications\Notifiable;use Illuminate\Contracts\Auth ...

  8. python编码环境安装与基本语法

    一.pycharm的基本使用 1.python以及pycharm的安装 python的版本选择:3.x版本就行 pycharm的版本选择:社区版就够用 pycharm只是一个编写工具,python才是 ...

  9. Linux20期学习笔记 Day3

    管道符.通配符.转义符及部分常用命令.考点

  10. 【转】Android编译系统详解(一)——build/envsetup.sh

    出处 http://www.cloudchou.com/android/post-134.html 本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 准备好编译环境后,编译Rom的 ...