滚动条 | 易学教程

css修改浏览器滚动条

阅读更多关于 css修改浏览器滚动条

< body class = 'scrollbar' > < /body > .scrollbar { /*三角箭头的颜色*/ scrollbar-arrow-color: #fff; /*滚动条滑块按钮的颜色*/ scrollbar-face-color: #cdcdcd; /*滚动条整体颜色*/ scrollbar-highlight-color: #cdcdcd; /*滚动条阴影*/ scrollbar-shadow-color: #cdcdcd; /*滚动条轨道颜色*/ scrollbar-track-color: #515151; /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/ scrollbar-3dlight-color: #cdcdcd; /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/ scrollbar-darkshadow-color: #cdcdcd; /*滚动条基准颜色*/ scrollbar-base-color: #cdcdcd; } /* chrome & safari 浏览器 */ /*滚动条整体部分,必须要设置*/ .scrollbar::-webkit-scrollbar { width: 0px ; height: 0px ; background-color: #cdcdcd; } /*滚动条的轨道*/

操作web页面的滚动条

阅读更多关于操作web页面的滚动条

（1）滑动页面的滚动条到页面的最下面（2）滑动页面的滚动条到页面的某个元素（3）滑动页面的滚公条向下移动某个数量的像素 #!usr/bin/env python #-*- coding:utf-8 -*- """ @author: sleeping_cat @Contact : zwy24zwy@163.com """ #操作web页面的滚动条 from selenium import webdriver import unittest import traceback import time class TestDemo(unittest.TestCase): def setUp(self): self.driver = webdriver.Chrome() def test_scroll(self): url = 'http://111.160.124.227:9194/' try: self.driver.get(url) self.driver.execute_script('window.scrollTo(100,document.body.scrollHeight);') #使用JavaScript的scrollTo函数和document.body.scrollHeight参数 #将页面的滚动条滑动到页面的最下方 time.sleep(2) self.driver

HTML 修改滚动条样式

阅读更多关于 HTML 修改滚动条样式

修改滚动条样式给一个 div 设置 .orgs-container { max-height: 378px; height: 378px; overflow-y: auto; } Mac 上面的滚动条样式为修改样式 .orgs-container::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .orgs-container::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #ebebeb; } .orgs-container::-webkit-scrollbar-track { /*滚动条里面轨道*/ /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 10px; background: #fff; } 相关 HTML 代码如下，仅为记录类的层级关系 <div class="orgs-container"> <div> <span>11111111</span> </div>

纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

阅读更多关于纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

html代码展示（直接复制代码保存至本地文件运行即可）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>移动端隐藏滚动条解决方案</title> <style type="text/css"> * { padding: 0; margin: 0; } .container { height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .nav { height: 100%; overflow-x: scroll; overflow-y: hidden; background-color: #999; } .con { width: 640px; height: 100%; display: flex; align-items: center; } .con>li { text-align: center; font-size: 16px; width:

关于vue火狐浏览器隐藏滚动条不生效的问题

阅读更多关于关于vue火狐浏览器隐藏滚动条不生效的问题

需求：隐藏浏览器自带滚动条样式（兼容Chrome和Firefox) 解决方法： Chrome浏览器： &::-webkit-scrollbar { display : none ; } Firefox浏览器： scrollbar-width : none ; 效果： Chrome浏览器可以隐藏滚动条的同时保存滚动效果，Firefox浏览器隐藏滚动条不生效问题点：检查发现scrollbar-width属性没有生效，开发用Firefox浏览器版本57，网上查过后发现 scrollbar-width属性对Firefox浏览器64及以上版本才适用因此，升级过Firefox浏览器版本后解决这个问题。来源： CSDN 作者：山雨欲来枫满楼链接： https://blog.csdn.net/weixin_44829594/article/details/103885144

C++之继承与派生(3)

阅读更多关于 C++之继承与派生(3)

　　大家都知道C#和C++重要的区别之一就是，C#支持单一继承和多接口继承，而C++则允许多继承。至于哪一个比较好，在这里就不去评价了。今天所要说的重点内容就是C++的多重继承以及虚基类。　　1.前一节我介绍了有关单继承的内容，实际上，一个派生类可能会继承于两个或多了基类，那么这样的派生方法称为多基派生或多重继承。它声明的一般格式：　　class 派生类名:继承方式1 基类名1, 继承方式2 基类名2, 继承方式3 基类名3, ...,继承方式n 基类名n 　　{ 　　　　派生类新增的数据成员和成员函数; 　　} 在多重继承中，公有继承、保护继承以及私有继承对于基类成员在派生类中的访问属性与单继承的规则是相同的。同样的多重继承派生类的构造函数和析构函数又是如何定义呢？一般形式：　　派生类名(参数总表):基类名1(参数子表1), 基类名2(参数子表2),...,基类名n(参数子表n) 　　{ 　　　　派生类新增成员的初始化语句; 　　} 与单继承派生类构造函数一样，多继承下的派生类构造函数必须同时负责该派生类的所有基类构造函数的参数传递。且构造函数和析构函数的调用顺序和单继承是一样的(可参考 C++之继承与派生(2) )，先调用基类构造函数，再调用对象成员的构造函数，最后调用派生类的构造函数。那么处于同一层次的各个基类构造函数的调用顺序是取决于声明派生类时所指定的各个基类的顺序

jQuery常用操作之DOM操作(二)

阅读更多关于 jQuery常用操作之DOM操作(二)

包裹节点 wrap() 把匹配的所有元素节点分别用其他节点包裹起来 wapAll() 把匹配的所有元素节点只用一个元素包裹起来 wrapInner() 把所匹配的所有元素的子内容(含文本节点)用其他节点包裹起来遍历节点遍历节点的方法都可以使用 jQuery 表达式作为参数来筛选元素 children() 取得匹配元素的子元素集合 next() 取得匹配元素后面紧邻的同辈元素 prev() 取得匹配元素前面紧邻的同辈元素 siblings() 取得匹配元素前后所有的同辈元素 closest() 取得最近的匹配元素:首先检查当前元素是否匹配,然后再检查父元素,直到找到,如果实在找不到就返回空 jQuery 对象 parent() 取得每个匹配元素的父元素 parents() 取得每个匹配元素的祖先元素属性操作获取属性选择一个元素节点后,使用方法 attr('属性名') 设置属性选择一个元素节点后,使用方法 attr('属性名', '属性值') 删除属性选择一个元素节点后,使用方法 removeAttr('属性名') 样式操作获取样式选择一个元素节点后使用方法 attr('css样式名') 设置样式选择一个元素节点后使用方法 attr('css样式名', 'css样式值') 追加 class 使用 addClass('类名') 移除 class 使用

懒加载的实现原理及一些实现方法

阅读更多关于懒加载的实现原理及一些实现方法

图片懒加载为了避免页面一次性向服务器发送大量请求而造成页面阻塞，我们需要控制请求数量，按照我们需要的量去加载图片。懒加载的优点提高前端性能，按需加载图片减轻服务器负担，提高页面加载速度。懒加载的原理图片的加载是依赖于 src 路径，我们可以设置一个暂存器，把图片路劲放到暂存器中，当我们需要这个图片加载显示时，再把路径赋值给 src ，这样就能实现按需加载，也就是懒加载。我们通常使用html5中的 data- 属性作为暂存器，例如 src 的值默认是正在加载中的GIF，而真正的图片路径是保存在 data- 中。懒加载的实现现在很多优秀的插件都能够实现懒加载的功能，但是不管方法如何，实现原理都是一样的。 JQuery （不使用插件）使用懒加载时，我们的 src 的值默认是”正在加载中“的GIF， data-lazyload 是自定义属性，用于存放图片真实路径。如下面的代码。 <img src="loading.gif" data-lazyload="img.jpg"> 我们首先要知道什么时候应该加载图片，什么时候不需要加载？对于用户来说，看得到的地方才需要加载，看不到的地方加载了也是白白浪费资源。所以我们知道，在可视区域中，我们才需要加载图片。如何判断图片是否在可是区域？我们可以利用元素的偏移高度，对比设备宽度加上滚动条高度来判断该元素是否处于可视区域中。

js文字无缝滚动

阅读更多关于 js文字无缝滚动

今天要实现个文字滚动的效果，一开始试了 <marquee></marquee> 这个标签，但是发现效果不太好，不能无缝滚动，而且在手机上有卡顿不太流畅。决定用js去实现。首先写个标签，注意下标签里面文字的长度要超出标签，因为我下面加了判断，如果没有超出就不会有滚动条，也就不会滚动哦~ <style> #scrollobj{ min-width: 70px; /*先在这里写个最小宽度*/ display: inline-block; white-space: nowrap; overflow: hidden; } </style> <body> <div id="scrollobj">这里是滚动内容纯文字哈哈哈，滚动吧</div> </body> 在你的页面里调用这个方法就ok了。 function sc() { var $scrollobj = document.getElementById('scrollobj'); function scroll(self) { /*往左*/ var tmp = (self.scrollLeft)++; //当滚动条到达右边顶端时 if (self.scrollLeft == tmp) { self.innerHTML += " " + self.innerHTML; } //当滚动条滚动了初始内容的宽度时滚动条回到最左端 if

浏览器滚动条样式更改

阅读更多关于浏览器滚动条样式更改

body{ scrollbar-arrow-color: red; /*上下按钮上三角箭头的颜色*/ scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/ scrollbar-3dlight-color: blue; /*滚动条亮边的颜色*/ scrollbar-highlight-color: #333; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: yellow; /*滚动条阴影的颜色*/ scrollbar-darkshadow-color: green; /*滚动条强阴影的颜色*/ scrollbar-track-color: #eee; /*滚动条背景颜色*/ scrollbar-base-color: black; /*滚动条的基本颜色*/ Cursor:url(mouse.cur); /*自定义个性鼠标*/ /*以上2项适用与：body、div、textarea、iframe*/ } ::-webkit-scrollbar { /* 滚动条整体部分 */ width:10px; margin-right:2px } ::-webkit-scrollbar-button { /* 滚动条两端的按钮 */ width:10px; background-color: yellow; } ::-webkit

订阅滚动条