网页滚动条显隐设置

最新推荐文章于 2021-03-01 15:55:29 发布
最新推荐文章于 2021-03-01 15:55:29 发布
阅读量351 收藏
点赞数 1
分类专栏： HTML CSS
HTML 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
CSS
1 篇文章 0 订阅
订阅专栏
没有水平滚动条 


<body style="overflow-x:hidden"> 


没有垂直滚动条 


<body style="overflow-y:hidden"> 


没有滚动条 


<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">或<body scroll="no">


1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置

     以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。

     应用:
没有水平滚动条: 
<div style="overflow-x:hidden">test</div>
没有垂直滚动条
<div style="overflow-y:hidden">test</div>
没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div>
自动显示滚动条 
<div style="height:100px;width:100px;overflow:auto;">test</div>



2,自定义滚动条的颜色

Body { 
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ 
scrollbar-face-color: #333; /*立体滚动条的颜色*/ 
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ 
scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ 
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ 
scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/ 
scrollbar-track-color: #666; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ 
Cursor:url(mouse.cur); /*自定义个性鼠标*/ 
}

以上2项适用与<body>、<div>、<textarea>、<iframe> 


落泪的只有我
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css网页滚动条样式设置--css样式
yaoyuan725的专栏
06-15 2976
css样式详细介绍，网页滚动条样式设置各条语句含义如下：Crollbar-Face-color:滚动条页面颜色设定；Scrollbar-Highlight-Color:滚动条斜面和左面颜色设定；Scrollbar-Shadow-Color:滚动条下斜面和右面颜色设定；Scrollbar-3Dlight-Color:滚动条上边和左边的边沿颜色设定；Scrollbar-Arrow-Color:
隐形滚动条
webZRH的博客
06-28 584
三种控制DIV内容滚动的方法：方法一：使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置 function onGetMessage(context) {msg.innerHTML+=context;msg_end.click(); }  方法二：利用DIV的scrollIntoView方法，将最底端滚动到可视位置 [list=1]language="javascript1.
页面显示滑动条样式
weixin_33895604的博客
10-13 125
body { background-color: #F3F9FD; color: #004779; font-size: 12px; font-family: 宋体; /* scrollbar-base-color: #dbecf8; scrollbar-arrow-color: #2a8ed1; scrollbar-track-color: #bdddf2; ...
关于页面滚动条的设置
Handsome丶Boy
03-21 693
       最近公司做项目，我负责的模块中显示的列表信息太多（细数了下，共有25+列），刚开始不知道怎么弄滚动条，然后也没去网上搜，因此就把这25列数据调整列宽后凑合在一起了。由于公司屏幕分辨率很大，所以一屏也能显示出来，此后也就忘了滚动条的问题。但这样固定列宽的情况，在项目开发过程中难免会遇到数据量过长时造成排版变乱。由于不知道怎么用滚动条，所以一直就处于   调整列宽-排版乱-调整列宽-排...
滚动条自定义样式以及显示和隐藏
lei_0912的博客
03-01 403
滚动条始终隐藏 ::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } 自定义滚动条样式 ios上设置了不起作用，目前安卓是可以实现的 ::-webkit-scrollbar { width: 5rpx; height: 13rpx; -webkit-border-radius: 5rpx; -moz-border-radius: 5rpx;
显隐器_可半透明_显隐器_
09-29
在IT领域，显隐器是一种特殊的工具，它主要用于管理和控制计算机上运行的程序的可见性。标题中的"显隐器_可半透明_显隐器_"暗示了这是一款具有透明度调节功能的软件，能够帮助用户对屏幕上显示的程序进行隐藏或显示...
显隐随心.msi
08-15
快速切换窗口的显示与隐藏，拒绝他人的偷窥！支持XP、Win7、Win10。可自由定义鼠标、键盘操作窗口的显示与隐藏。
SuperMap iMobile for iOS 图层显隐切换
12-15
我们可以通过设置这个属性来实现图层的显隐切换。例如，当用户触发切换操作时，我们可以调用`setVisible:`方法改变图层的可见状态。 4. **监听图层事件**： 为了响应用户的操作，我们需要监听图层的显示/隐藏事件...
滑动触摸控制多个div显隐
03-17
在网页设计和开发中，"滑动触摸控制多个div显隐"是一个常见且实用的技术，主要应用于移动设备或响应式设计。这个技术的核心是利用JavaScript（通常与jQuery库结合使用）来监听用户的触摸事件，根据用户的滑动操作来...
js网页设计的一些东西控制横向和纵向滚动条的显隐记录并显示网页的最后修改时间
05-29
js关于网页设计的一些东西 控制横向和纵向滚动条的显隐 记录并显示网页的最后修改时间等
【HTML系列】网页元素(滚动条)实现方法
CSDN明星博主，认证博客专家，视频、Matlab领域优质创作者。
04-11 2042
Date: 2019-3-11【Tag: 开发工具】 前言     前端开发中HTML语言实现了网页中内容的解析。本文讲述了HTML网页滚动条的实现方法。本人博客主页 https://blog.csdn.net/soaringlee_fighting 中友情链接里面的循环播放的图标就是采用这种标签实现的。
1自定义滚动条样式；2图片渐隐；
bingtang的专栏
09-06 209
1.自定义滚动条样式；支持-Chrome-Safari-Opera；不支持-Firefox-IE <style type="text/css" media="screen"> .scrollBar{height: 300px; overflow-y: auto; width: 100px; margin: 0 auto;} .scrollBox{height: 500px...
CSS实现无缝滚动+渐隐渐现效果
aminwangaa的博客
08-09 3565
效果 直接上代码 import React, { useState, useEffect } from 'react'; import "./index.css" function App() { const ary = [ "1- 关关雎鸠，在河之洲。", "2- 窈窕淑女，君子好逑。", "3- 参差荇菜，左右流之。", "4- 窈窕淑女...
国外创意网站设计：40个精美的水平滚动网站作品
09-26 1895
我们平常见到的网站基本上都是垂直滚动，那么水平滚动的网站是怎么样的滚动形式呢？下面向大家展示40个创意的水平滚动网站作品，这些网站使用了 jQuery等优秀的 JavaScript 库来实现平滑的水平滚动动画效果，相信这些优秀的网站作品一定能带给你不一样的浏览体验。 1. Asiance 2. Vanity Claire 3. Pigs Potter 4. Bo
浏览器窗口缩小，水平滚动条自动显示出来
Jonia的Castle
04-02 1万+
最原始的代码：浏览器窗口缩小，水平滚动条不显示        主页面 body{   margin:0px;   width:100%;   height:100%;   background-color:#F0F0F0; } #head{   background-color:#FFFF00;   width:100%;   height:100px; }
如何去除页面滚动条
热门推荐
qq_34893326的博客
11-29 3万+
<body scroll=no> 去掉水平滚动条： <body style="overflow-x: hidden"> 去掉竖直滚动条： <body style="overflow-y: hidden"> 隐藏横向滚动条，显示纵向滚动条: <body style="overflow-x:hidden;overflow-y:scroll"> 全部...
Html —— 显示滚动条
看了就会暴富的博客！
10-19 2729
问题 如何在Html中显示滚动条? 解决 是否显示滚动条依赖于两个条件 1、当前长度已经大于设置长度 2、已配置滚动条 代码 //需要配置y轴滚动条的class .a-b-c { //最大高度 max-height: 150px; //y轴长度大于最大高度时，显示滚动条 overflow-y: scroll; } //需要配置x轴滚动条的class .d-e-f { //最大宽度
js 中 span 设置显隐
最新发布
06-10
要设置一个 span 元素的显隐可以使用 JavaScript 中的 style 属性来改变它的 display 值。如果要将 span 显示出来，可以将其 display 属性设置为 "inline" 或者 "block"。如果要将 span 隐藏起来，可以将其 display ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值