css实现无（隐藏）滚动条页面

实现功能：隐藏浏览器滚动条，且不影响鼠标滚轮滚动页面
适用：以大图片为背景或产品介绍页面（如果和视差滚动一起使用应该会效果更佳）
所需技术：非常简单的css和js

首先来看下对比效果（图1 => 图2，两者都能通过鼠标滚轮进行内容的滚动）


（图1）


（图2）

可以明显的看到：图2的正文宽度明显比图1的宽度小，并发生了向右的偏移。
这就是无滚动条页面的基本原理：移动(设置)正文的偏移量（margin/padding），使正文的滚动条出现在父节点可是范围的外面，以达到无滚动条的效果

代码实现
HTML节点可以分成3个层次：

窗口
 | -容器
      | -正文          
如

然后经过简单的css设置就可以实现无滚动条的效果
窗口需要设置：overflow:hidden

容器需要设置：overflow-y:scroll， height（定高）， margin(padding / relateiv+left 也行)

如果需要正文的宽度和浏览器宽度一致，则需要实时通过js计算浏览器的宽度，然后设置
容器的宽度 = 浏览器宽度 + 20px(一般浏览器滚动条的宽度)
（当然还有一些css细节地方，需要根据具体情况做调整）

TIP:使用这种方式隐藏滚动条后，onscroll事件不能在设置在window上了，而是在容器上设置

时间： 2024-08-02 11:04:13

css实现无（隐藏）滚动条页面的相关文章

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

代码如下: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css&qu

CSS 移动端隐藏 滚动条

去除移动端浏览器滚动条: element::-webkit-scrollbar{display:none} IOS滚动条流畅: div{ -webkit-overflow-scrolling:touch } 原文地址:https://www.cnblogs.com/boomupupup/p/9530068.html

CSS中隐藏滚动条的简单实现方法

xhtml中隐藏滚动条 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

css隐藏滚动条方法

1.完全隐藏 在<boby>里加入scroll="no",可隐藏滚动条:<boby scroll="no"> 2.在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条:反之,则显示:<boby scroll="auto"> 3.样式表方法 在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条:加入style="ov

JS弹出层遮罩,隐藏背景页面滚动条细节优化

做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度

CSS中隐藏滚动条的方法

xhtml中隐藏滚动条 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

CSS 实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性.由于只需要兼容移动浏览器(Chrome 和 Safari),于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar. 关于这个选择器的介绍可以参考:Styling ScrollbarsCustom Scrollbars in WebKit 应用如下 CSS 可以隐藏滚动条: .element::-webki

css隐藏滚动条

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案,方法1: 代码如下: html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.缺点:即使页面不需要垂直滚

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

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的 1 div { 2 scrollbar-face-color: #fcfcfc; 3 scrollbar-highlight-color: #6c6c90; 4 scrollbar-shadow-color: #fcfcfc; 5 scrollbar-3dlight-color: