滚动条

1.float和position:absolute | position:fixed会默认把元素转换成inline-block， 如果元素没有指定宽高，则元素的宽高由内容撑开。 2.display:none隐藏对象，隐藏后不占有位置 visibility:hidden隐藏元素，隐藏后继续占有原位置 overflow:visible | auto | hidden | scroll 不剪切内容也不添加滚动条 | 超出显示滚动条不超出不显示滚动条 | 超出的部分隐藏掉 | 总是显示滚动条 3.只有position：relative|absolute|fixed 才能设置z-index 生效（取值正负0都可以），其余标准流、浮动、静态定位都没有此属性。 4.浮动的元素总是找离他最近的父元素对齐，但是不会超出父元素内边距的范围 5.如果一个盒子没有给定宽度|高度或者盒子的宽度|高度继承其父元素的宽度|高度，则设置padding不影响盒子大小 6.垂直外边距塌陷： 　　6.1相邻块元素垂直外边距塌陷： 　　　　当上下相邻的两个块元素相遇时，上面的元元素有margin-botton，下面的元素有margin-top，则他们之间的垂直间距不是margin-bootom和margin-top之和，而是两者中的较大者。 　　　　解决方案：尽量避免同时设置相邻元素的上下外边距。 　　6

今天遇到需要监听滚动条事件的问题，本来以为是一个简单的监听就好了，哪成想，这么多bug，说到底还是自己基础不扎实，所以趁现在下班没事把它记录下来。以备后续所需，哈哈。 （1）首先是最基本的监听事件 methods: { handleScroll() { const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //兼容不同的浏览器 console.log(top); if (top > 100) { // console.log("大于"); } } }, mounted() { window.addEventListener("scroll", this.handleScroll); //监听滚动事件 } （2）但是！他就是不出来呢，一开始咱也不知道啊，后来又是百度又是查资料的，说是监听时需要三个参数于是》》》 mounted() { window.addEventListener("scroll", this.handleScroll, true); } //后面的 true 则是第三个参数 　然后就可以出来了（下图便是） （3）然后！重点来了，因为做的是手机端吗，为了他的滚动流畅度，于是就给页面最大的容器加了“overflow: scroll

在做UI自动化项目的时候，我们不免会遇到一些页面的内容比较多，导致会有滚动条，但是我们又主要操作当前页面看不到的元素，这怎么办呢？ 在我们实际操作过程中，我们肯定是直接滑动鼠标操作就可以完成，但是在做自动化的时候，我们怎么办呢？ 今天总结下用js代码来实现滚动条的操作 在selenium中是使用execute_script方法去执行js语句来实现滚动操作的 语句：execute_script("arguments[0].scrollIntoView();", target) 其中这个target就是通过定位元素找到的元素对象 所以滚动的步骤是： 　　1、通过selenium找到我们需要的元素 　　2、通过执行js语句，将元素滚动到可见区域 举个栗子： 　　 在百度首页搜索腾讯之后滑动到相关搜索处： from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys dr = webdriver.Chrome() dr.get("http://www.baidu.com") dr.implicitly_wait(3) dr.find_element(By.ID, "kw").send_keys("腾讯",

li { width: 260px; height: 370px; border: 1px solid #D9D9D9; overflow-y: scroll; &::-webkit-scrollbar { width: 3px; } &::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 10px; } &::-webkit-scrollbar-track-piece { background: transparent; } } 效果图： 原理解释一波： 在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······ 下面我们来看一下webkit浏览器是如何强大的吧！首先来了解它的属性: 滚动条的设置 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece

基于 offsetHeight 和 clientHeight 判断是否出现滚动条 by: 授客 QQ ： 1033553122 HTMLEelement.offsetHeight简介 HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 参考链接： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight HTMLEelement.clientHeight简介 这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。 clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 参考链接： https://developer.mozilla.org/zh-CN/docs

低数据模式 什么是“低数据模式”？大家可以参考iPhone的低电量模式，只是低电量模式是针对耗电，低数据模式则是针对蜂窝数据流量。开启该功能后，系统会自动限制App的网络使用，当你每个月流量有限或者月底流量不足时，打开低数据模式或许会起到意想不到的效果。 打开方法：设置>蜂窝网络>蜂窝数据选项>低数据模式 App独立语言 在iOS 13之前的系统中，如果你更改了iPhone的默认语言，那么大部分App都会切换到同样的语言，但是有了这个功能之后，用户就可以自己自己给App设置独立语言，不会随着系统切换。不过可能由于还是测试版，功能还未完善，小编设置后并未发现语言改动。 打开方法：设置>下拉点击你项更改的App>首选语言。 侧边滚动条 可能是为了方便用户浏览文档，网页等等，苹果在iOS 13中加入了侧边滚动条，通过滚动条我们可以快读到大我们想要浏览的位置。在iOS 13之前，用户只能通过用手滑动的屏幕来实现，有了滚动条的加入，这一操作变得更加方便。 复制智能选择 经常需要复制或者粘贴的小伙伴会发现，在iOS 13中，变得更加好用了，在之前如果你需要复制一段话，只需要双击或者长按即可。而现在iOS 13，该功能还加入了“智能选择”功能，可以自动帮用户选取需要复制的内容。，比如电话、地址、邮箱等等。 移动光标任意拖动 此外，我们在选择段中的某一段话复制或者粘贴的时候也变得更加便捷了

href="javascript:void(0)" 而不是 href="#" 来源： https://www.cnblogs.com/chenxizhaolu/p/11926292.html

动作事件及监听处理： 在Swing的事件处理中，可以使用Action Listener接口处理按钮的动作事件，Action Listener接口只定义了一个方法. void actionPerformed（ActionEvent e） 发生操作时调用 JMenuBar组件 JMenuBar负责创建菜单条，即JMenuBar的一个实例就是一个菜单条。 JMenuBar bar = new JMenuBar(); //创建菜单条 将菜单条添加到窗口中的方法： public void setJMenuBar(JMenuBar menubar); JMenu JMenu负责创建菜单，即JMenu的一个实例就是一个菜单。 JMenu menu1 = new JMenu("菜单"); //创建菜单，名字是菜单 bar.add(menu1); //添加到菜单条中 JMenuItem 为菜单中加入菜单项即JMenuItem的一个实例就是一个菜单项。 JMenuItem是JMenu的父类，因此菜单项本身可以是菜单，这样的菜单项叫做子菜单 动作事件及监听处理 void actionPerformed（ActionEvent e） 发生操作时调用 JSlider —— 滑动条常用方法 get/setMinimum()：获取/设置可以选择的最小值。 get/setMaximum()：获取

/* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 8px; height:8px; } /* 滚动槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 2px; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(153,153,153,0.4); -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.8); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,0,0,0.3); } /* 隐藏滚动条 */ ::-webkit-scrollbar{ display:none; } 来源： https://www.cnblogs.com/xaun/p/11912269.html

我们知道scroll-view组件作为滑动控件非常好用，而有时候我们想放置一个跟随滚动位置来跟进的滚动条，但又不想用滚动条api该怎么办呢？（当然是自己写一个呗还能怎么办[自黑冷漠脸]） 嗯，没错。自己写一个就好了啊。[厚脸皮点头] 请看效果图 那么如何做呢？我是通过scroll-view组件的bindscroll事件来自定义的。让我们先看看文档： 请小伙伴们看看，滚动时会触发bindscroll事件，触发时会生成scrollLeft、scrollTop等的数据；好，那让我们console一下看看。 没滚动时： 可以看到scrollLeft的值为0 滚动到最右边时： scorllLeft的值变为222.6多了 这就说明滚动的总长度范围是0~222.6，那么，我们可以根据滚动范围来制定一个比例，动态的设置红线滚动条的水平距离。 贴上代码 wxml //红线滚动条的wxml，动态设置其left值 <view class="scroll-line"> <view class="scrollMove" style="left:{{viewleft}}rpx"></view> </view> js //滚动触发函数scrollMove scrollMove: function(e) { //获取滚动距离 var left = e.detail.scrollLeft; //将滚动距离（位移