滚动条

一、如果一个容器盒子的内容超出元素的高度，如何自定义侧边栏滚动条样式？ 2、给这个容器加上下面内容就可以了 容器 ::-webkit-scrollbar { width : 6px ; //滚动条的宽度 } 容器 ::-webkit-scrollbar-thumb { background-color : #8899A7 ;//滚动条的颜色 border-radius : 3px ;//滚动条的边框倒角 } 文章来源: 自定义侧边栏滚动条样式

滚动穿透问题 滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案，但有些还是存在一定的问题： https://gitlwz.github.io/2018/05/02/vue-move/ 设置overflow为hidden 1 2 3 4 5 6 .modal-open { &, body { overflow : hidden; height : 100% } } 即当弹出层弹出时在html上添加.modal-open,禁用 html 和 body 的滚动条,但实际用上就会发现： 由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来计算原来滚动的位置，在弹出时保持滚动位置； js ֮ touchmove + preventDefault 1 2 3 modal.addEventListener( 'touchmove' , function (e) { e.preventDefault(); }, false ); 最后解决方案：position: fixed 1 2 3 4 body .modal-open { position : fixed; width : 100% ; } 这种方式同样当弹出层弹出时滚动条会丢失，所以还需要使用js来保存滚动条的位置

个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出现更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结， 以用来判断元素是否在可视区域以及用原生js简单实现懒加载 。文末有个简单的懒加载实现的demo，有需要的可以看一下。 Ŀ¼ 工欲善其事，必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前，我们先简单回顾下以下几个关键的概念。 ps： 如果你对这些概念已经比较熟悉了，可以直接跳到第五点查看关键代码示例。 1. 偏移量 偏移量(offset dimension),元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小( 注意，不包括外边距 )。通过下列4个属性可以取得元素的偏移量。 偏移量 概念 公式 offsetHeight 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。 offsetHeght = content + padding + border + scrollX offsetWidth 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂 直滚动条的宽度、左边框宽度和右边框宽度

LayuiAdmin 滚动条设置问题解决 今天在使用 LayuiAdmin(单页版)，发现通过： $ ( "html,body" ). animate ({ "scrollTop" : top }); 这种js代码，无法控制滚动条位置 找到官方单页版演示界面，f12，查看元素相应高度发现： 打开layuiadmin的layout.html页面 在主体内容部分，最内层的div上加上id,我们需要控制的滚动条，属于该div 在需要调节滚动条位置时，可以执行： document . getElementById ( 'scrolldiv' ). scrollTop = 100 ; //通过scrollTop设置滚动位置 位置根据自己需求而定 结束 来源：博客园 作者： 丿似锦 链接：https://www.cnblogs.com/zktww/p/11557593.html

overflow ֵ 描述 visible 内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 由浏览器决定如何显示。如果需要，则显示滚动条。 offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下border-width * * clientWidth 水平方向 width + 左右padding * clientHeight 垂直方向 height + 上下padding * * offsetTop 获取当前元素到 定位父节点 的top方向的距离 * offsetLeft 获取当前元素到 定位父节点 的left方向的距离 * * scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth * scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight 来源：博客园 作者： 龙维 链接：https://www.cnblogs.com/lw1998/p/11552317.html

界面文档 界面入门介绍 界面动画介绍 StarterGui 本类是一个 Service ，单例，可以通过 game:GetService("StarterGui") 来获取。 作为容器。可以放置一些界面在它下面，当玩家进入游戏中的时候，它的子节点都会被复制到玩家的PlayerGui下。 作为接口。它可以访问 CoreGui 可以通过它来对游戏中的一些默认界面进行设置。可以通过 SetCore 发送提示信息等等 PlayerGui 玩家所能看到的界面都会在PlayerGui下。StarterGui里面的内容都会自动复制到这个下面。所以StarterGui只适合放一下初始界面，不应该放置大量界面。如果 Players.CharaterAutoLoads 设置成false，则界面也不会自动加载，需要等到 Player:LoadCharater 调用之后才会加载。 获取方法： game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui') ScreenGui 主要的界面控件容器。只有当它是PlayerGui的子节点时，才会被展示。也就是说可以把它的父节点修改，即可以不显示它。 IgnoreGuiInset 可以设置忽略系统菜单的位置。不设置的话，整个界面实际上会往下偏移一个系统菜单的位置。 SurfaceGui 实现3D界面

问题分析 首先-明确范围 -- web自动化测试 其次-明确条件 -- 元素定位都正确 然后-明确现象 -- 元素定位会失败 最后-得出结论 判断定位的元素属性信息是否正确(已经确定正确),但是 业务逻辑 是否正确需要确定 受到网络/服务器/浏览器影响,页面加载过慢会造成定位失败,需要通过 元素等待 处理 目标元素是否直接可见/是否需要 鼠标动作 才能显现出来 默认浏览器大小的页面加载范围过小造成部分元素遮挡,需要启动浏览器后 最大化窗口 受前端动态加载技术影响,页面动态加载数据有时需要监听滚动条动作(长页面翻页),需要 操作滚动条 页面操作过程中的窗口弹框alert也会影响页面定位和操作,需要先 处理alert 页面部分超链接点击后会在新窗口中打开,目标元素在新窗口中时,需要进行 窗口切换 收到前端页面框架影响,页面内容可能会在frame子页中,需要 frame切换 问题总结 由于这个问题回答清楚需要很多Selenium的API常用操作,所以针对这个问题的回答要特别注意代码实现 业务逻辑 元素等待 鼠标动作 # 实例化一个动作链对象# 动作链对象调用动作方法--move_to_element(目标元素对象)# 动作链对象调用perfom()ActionChains(driver).move_to_element(driver.find_element_by_class_name(

https://www.hangge.com/blog/cache/detail_1931.html 使用： 修改滚动条： $("#thecondMenu_container").niceScroll({ 　　cursorcolor: "#b3b3b3", 　　background: "#eee", 　　cursorwidth: 8, 　　autohidemode: false }); 隐藏滚动条： $( "#div1" ).getNiceScroll().hide(); 滚动到某个指定位置： $( "#div1" ).getNiceScroll(0).doScrollLeft(100); 配置参数： touchbehavior: true //是否是触摸式滚动效果 cursorcolor: "#333" //滚动条的颜色值 //滚动条的透明度值 //滚动条的宽度值 background: "#00F" //滚动条的背景色，默认是透明的 autohidemode: true //滚动条是否是自动隐藏，默认值为 true 来源：博客园 作者： 你像一只失宠猫 链接：https://www.cnblogs.com/150536FBB/p/11498741.html

本文转载于: 猿2048 网站☞ https://www.mk2048.com/blog/blog.php?id=haji2jaaaa offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。 var offsetWidth = element.offsetWidth; offsetHeight HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 var offsetHeight = element.offsetHeight; offsetTop /

1.offset().top匹配元素相对于文档的偏移位置（） <body> <style type = "text/css" > body { border : 20px solid #CCC; margin : 10px ; padding : 40px ; background :# EEE ; } #test { width : 400px ; height : 200px ; padding : 40px ; background :# F60 ; border : 5px solid #888; } </style> <div id = "test" ></div> <script> var test = document . getElementById ( "test" ); test . innerHTML = "<p>Browser:" + navigator . userAgent + "</p>" + "<p>offsetWidth:" + test . offsetWidth + "</p>" + "<p>offsetHeight:" + test . offsetHeight + "</p>" + "<p>offsetLeft:" + test . offsetLeft + "</p>" + "<p>offsetTop:" + test .