滚动条 | 易学教程

vue项目中遇到的坑总结（持续更新）

阅读更多关于 vue项目中遇到的坑总结（持续更新）

在vue项目stylus中使用媒体查询 .header >>> h2 font-size 30px font-weight 100 line-height 45px @media (max-width: 992px) font-size 22px vue项目中的reset.css使用在写项目的时候，需要重置浏览器的样式，所以需要reset.css reset.css链接地址： https://meyerweb.com/eric/tools/css/reset/ vue项目中使用滚动条插件 vuescroll 通过使用vuescroll可以美化滚动条，可以很好的和vue项目结合。链接地址： https://vuescrolljs.yvescoding.org/zh/ 使用element table在不该出现滚动条的情况下出现了滚动条解决方法：查看reset.css table { border-spacing: 0; border-collapse:separate;/* 如果值为collapse，则element表格下方会出现滚动条*/ } git进行项目管理 git常用学习地址： www.bootcss.com/p/git-guide stylus文件的全局变量的配置在配置文件build/utils.js解决该问题,在generateLoaders方法的后面定义如下变量：

js的防抖和节流

阅读更多关于 js的防抖和节流

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。节流概念(Throttle) 按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。主要应用场景有：scroll、touchmove 防抖概念(Debounce) 抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。主要应用场景有：input验证、搜索联想、resize 节流实现思路：第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为flase。那么下次判断变量时则为flase，函数会依次运行从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们现在抽象出这个功能需求-- 监听浏览器滚动事件，返回当前滚条与顶部的距离

滚动条自定义样式

阅读更多关于滚动条自定义样式

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 1px; height: 1px; background-color: rgba(255,255,255,0); display: none; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); border-radius: 2px; background-color: rgba(255,255,255,0); display: none; } /*定义滑块内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3); background-color: rgba(255,255,255,0); display: none; } 滚动条默认不显示来源： https://www.cnblogs.com/zui1024/p/11799923.html

Tkinter 之ScrollBar滚动条标签

阅读更多关于 Tkinter 之ScrollBar滚动条标签

一、参数说明参数作用 background (bg) 设置背景颜色 borderwidth (bd) 指定 Listbox 的边框宽度，通常是 2 像素 cursor 指定当鼠标在上方飘过的时候的鼠标样式 orient 指定绘制 "horizontal"（垂直滚动条）还是 "vertical"（水平滚动条） highlightbackground 指定当滚动条没有获得焦点的时候高亮边框的颜色 highlightcolor 指定当滚动条获得焦点的时候高亮边框的颜色 jump 指定当用户拖拽滚动条时的行为 relief 指定边框样式, 默认值是 "sunken" command 当滚动条更新时回调的函数通常的是指定对应组件的 xview() 或 yview() 方法 takefocus 指定该组件是否接受输入焦点（用户可以通过 tab 键将焦点转移上来）, 默认值是 True width 设置滚动条的宽度, 默认值是 16 像素 ScrollBar函数列表： activate(element) -- 显示 element 参数指定的元素的背景颜色和样式 -- element 参数可以设置为："arrow1"（箭头1），"arrow2"（箭头2）或 "slider"（滑块） delta(deltax, deltay) -- 给定一个鼠标移动的范围 deltax 和 deltay

DIV 自定义滚动条样式（二）

阅读更多关于 DIV 自定义滚动条样式（二）

流浏览器自带的滚动条样式很丑，确实有必要美化。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。滚动条的css样式主要有三部分组成： ::-webkit-scrollbar 定义了滚动条整体的样式； ::-webkit-scrollbar-thumb 滑块部分； ::-webkit-scrollbar-thumb 轨道部分；下面以overflow-y:auto;为例（overflow-x:auto同） html代码： <div class="test test-1"> <div class="scrollbar"></div> </div> css代码： .test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none; } .scrollbar{ width: 30px; height: 300px; margin: 0 auto; } .test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb {/

js 原生判断内容区域是否滚动到底部

阅读更多关于 js 原生判断内容区域是否滚动到底部

逻辑判断内容滚动到底需要知道的信息内容区域的真实高度（也就是滚动区域）滚动条距离顶部的位置内容区域的可见高度分别对应下面的三个API。 element.scrollHeight 获取元素内容高度，，，【只读属性】 element.scrollTop 可以获取或者设置元素的偏移值，常用于，计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0. element.clientHeight 读取元素的可见高度【只读属性】下面直接引用MDN上面的一个经典的公式判定元素是否滚动到底如果元素滚动到底，下面等式返回true，没有则返回false. element.scrollHeight - element.scrollTop === element.clientHeight 案例-用户使用协议只有等用户阅读完协议才可以点击同意，也就是说滚动条到底部之后代表完成阅读 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > tab </ title > < style > textarea { height : 200 px ; width : 300 px } </ style > </ head > < body > <

client-,scroll-,offset-*的区别

阅读更多关于 client-*,scroll-*,offset-*的区别

offsetWidth、offsetHeight （width + padding + border + 滚动条） offsetTop、offsetLeft (距离父元素的距离，从父元素的padding算起，本元素的border) 即left+marginLeft clientWidth、clientHeight (width + padding, 不包含滚动条) clientTop、clientLeft(通常这些值就等于左边和上边的边框宽度, 即border-left-widht、border-top-width) scrollWidth、scrollHeight （如果没有滚动条和clientWidth的一致） scrollTop、scrollLeft 用于设置滚动条的位置 offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标 //用offsetLeft和offsetTop来计算e的位置 function getElementPosition(e){ var x = 0,y = 0; while(e != null) { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return { x : x, y : y }; } 来源： https:/

JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

阅读更多关于 JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

壹 ❀ 引我在 JQ的offset().top与js的offsetTop区别详解这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别，并得出了一条 offset().top = offsetTop - scrollTop 的结论，不过此结论只适用于监听元素滚动条，而window的滚动条并不满足。那么在滚动window滚动条时如何获取元素距离视窗顶部的距离呢，这就不得说说本文的主角getBoundingClientRect方法。贰 ❁ 关于getBoundingClientRect() 我们可以先拷贝下面的代码，动手起来跟着操作一遍，印象会深刻，需要引入JQ，这里提供一个静态资源地址，进去搜索JQ直接复制地址引入即可： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/demo.css"> </head>

修改el-table滚动条样式

阅读更多关于修改el-table滚动条样式

<include file="Trade:header" /> <style type="text/css" media="screen"> #tradeLeft{ width: 23%; padding: 20px; } /*chrome滚动条颜色设置*/ *::-webkit-scrollbar {width:7px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ *::-webkit-scrollbar-track {background-color:#f0f6ff; } /*定义滚动条轨道内阴影+圆角*/ *::-webkit-scrollbar-thumb {background-color:#73abb1; border-radius:6px;} /*定义滑块内阴影+圆角*/ .scrollbarHide::-webkit-scrollbar{display: none} .scrollbarShow::-webkit-scrollbar{display: block} </style> <div id="tradeLeft"> <el-tabs v-model="marketlist" type="card" @tab-click="handleClick">

Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border

阅读更多关于 Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border

上一篇，介绍了Canvas布局控件在Blend中的使用。本篇继续介绍布局控件StackPanel,ScrollViewer和Border。相对于Grid和Canvas来说，StackPanel,ScrollViewer和Border是比较简单的布局控件，实现的功能相对来说单一。首先来说说StackPanel控件。从字面意思理解，是堆栈面板的意思。堆栈内的所有内容将按照顺序进行排列，排列方式分水平排列和垂直排列两种方式。对于StackPanel的使用，主要是对控件水平或者垂直排列，使用该控件排列控件，比Grid设置表格控制要容易很多。例如，在Grid中要设置Row和Column，然后将控件放置到各个Cell中，才能达到对齐布局的效果，而在StackPanel中只要使用Orientation属性控制就可以了。这里我们简单演示一下，在Blend中应用StackPanel 选中StackPanel后，在主窗口画一个StackPanel容器。然后选择按钮控件，在StackPanel中，画一个高为30的按钮。然后选中该按钮，复制创建三个新按钮，在复制粘贴的时候，会发现，每次创建一个新按钮会在布局中自动向下排列。这点和Grid和Canvas不同，在Grid和Canvas中复制粘贴控件，将会自动覆盖上一个控件，需要用ZIndex控制其位置。选中StackPanel

订阅滚动条