scroll | 易学教程

滚动插件better-scroll

阅读更多关于滚动插件better-scroll

本文转载自：《BetterScroll：可能是目前最好用的移动端滚动插件》作者：菠萝小萝卜 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（ GitHub地址）， API ，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。由于它基于原生 JavaScript 实现，不依赖任何框架，所以既可以原生 JavaScript 引用，也可以与目前前端 MVVM 框架结合使用，比如，其官网上的示例就是与 Vue 的结合。首先，让我们来看一下它是怎样让滚动更流畅的吧。让滚动更流畅在移动端，如果你使用过 overflow: scroll 生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。为什么会出现这种情况呢？因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验，比如滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有，就会让人感到卡顿。 BetterScroll 的滚动体验试一试 BetterScroll 的滚动体验吧。体验地址可以发现，在增加惯性滚动

better-scroll在vue中的坑

阅读更多关于 better-scroll在vue中的坑

在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，以滴滴为例，可以是这样竖向滚动的列表，如图所示：也可以是横向滚动的导航栏，如图所示：可以打开“微信 —> 钱包—>滴滴出行”体验效果。我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 better-scroll 的滚动原理不少同学可能用过 better-scroll，我收到反馈最多的问题是：我的 better-scroll 初始化了，但是没法滚动。不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构： <div class=

Angular 2 RC 5 Internet Explorer 10 poor scroll performance

阅读更多关于 Angular 2 RC 5 Internet Explorer 10 poor scroll performance

问题 I have built a product catalog app with angular 2 and now I am working on debugging the warts of IE. So, this is what happens: I have a CatalogComponent that contains a few children components that display the products in categories. I have 50-60 thumbnails in page so there is not a heavy load on page. The app works perfectly fine in other browsers, performance is ok. In CatalogComponent I have a function that detects what is the current displayed category. It listens to scroll events. this

Angular 2 RC 5 Internet Explorer 10 poor scroll performance

阅读更多关于 Angular 2 RC 5 Internet Explorer 10 poor scroll performance

antdesign vue组件问题（二）table 组件错位问题，滚动加载，行选中问题，树表格自定义节点图标

阅读更多关于 antdesign vue组件问题（二）table 组件错位问题，滚动加载，行选中问题，树表格自定义节点图标

table 组件错位导致问题出现的原因很多； 1. 内容区超过td范围， ant 组件并不像ele 提供了 tool-tip展示，解决办法：在每个单元格外包一层div 设置宽度 css 样式处理成文本溢出省略号代替显示当然你回发现这样处理过后文本是不会超出了，但是错位问题还是没有解决。 2. index 列和 check 列同时出现会存在错位。 index 列 ant 是不支持配置的，只能这样，在表头数据中插入一项 arr.unshift({ title: "序号", dataIndex: "index", width: this.indexWidth, render: (text, record, index) => `${index + 1}` }); 当你缩放页面，你会发现表头的缩放过程和表体不一致，这有导致了错位，，原因竟然是复选列和序号列的表头宽度和标题宽度不一致，这时又一个属性出现了 :scroll="{ x: scrollX, y: scrollY }"，通过设置 scroll 属性，官方意见是这样的 3. scroll 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。起初scrollX，为所有列之和，

鼠标事件:拖动文档元素

阅读更多关于鼠标事件:拖动文档元素

鼠标事件对象几个重要的属性： clientX: 窗口坐标，加上垂直滚动可以得到文档纵坐标 clientY: 窗口坐标，加上水平滚动可以得到文档横坐标 altKey: boolean值，点击时是否按下了alt键 ctrlKey: boolean值，点击时是否按下了ctrl键 metaKey: boolean值，点击时是否按下了meta键 shiftKey: boolean值，点击时是否按下了shift键 button 点击时按下的是鼠标的哪个键（不同浏览器的赋值不同，不易使用）收录拖动文档元素的js: /** * 拖动绝对定位的HTML元素 * 该方法依赖之前收集的getScrollOffset方法 */ function drag( elementToDrag, event ){ // 初始化鼠标位置，转换为文档坐标 var scroll = getScrollOffset(), startX = event.clientX + scroll.x, startY = event.clientY + scroll,y, // 这里假设了elementToDrag的offsetParent是文档的body元素，似乎会有问题 origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop, deltaX =

首页滚动图片源码分享

阅读更多关于首页滚动图片源码分享

在开发网站时，首页难免会遇到需要滚动展示图片的时候，从其他网站搜刮了点代码，分享于此： <html lang="zh-CN"><head> <meta charset="utf-8"> <title>jQuery无缝滚动</title> <style> .scroll-container { width: 800px; margin: 50px auto; } .scroll { width: 800px; border: 1px solid #ccc; overflow: hidden; } .scroll ul { white-space: nowrap; } .scroll ul li { display: inline-block; margin: 10px; } .scroll ul img { vertical-align: top; } </style> </head> <body style=""> <div class="scroll-container"> <div class="scroll"> <ul style="margin-left: -43px;"> <li><img src="http://www.jq22.com/demo/jqueryscroll201903112313/images/0003.png" alt=""></li> <li>

AvalonEdit scroll to line

阅读更多关于 AvalonEdit scroll to line

问题 I am having a lot of trouble getting an AvalonEdit TextEditor to scroll to a specific line. The ScrollTo() behavior is simply to scroll until that line is in the middle of the view. I have tried many different methods found around the internet and SO like getting the offset with double visualTop = textEditor.TextArea.TextView.GetVisualTopByDocumentLine(line); But each has had its own issues. For example, in the above line I was getting exceptions with the TextView.VisualLines . 回答1: I ended

How to scroll the contents to bottom by default in JTextPane?

阅读更多关于 How to scroll the contents to bottom by default in JTextPane?

问题 I have JTextPane on my window and i have JTextField. When i press enter enter in JTextField, the text gets added in JTextPane. Everything works fine and scrollbar too appears on its own. But, it doesn't appear properly. It automatically scrolls to the beginning of the content in JTextPane. How do i keep the scrollbar to the end of JTextPane? 回答1: I found a discussion of the same problem. Have a look at http://www.coderanch.com/t/329964/GUI/java/JScrollpane-Force-autoscroll-bottom 回答2: The

How to scroll the contents to bottom by default in JTextPane?

阅读更多关于 How to scroll the contents to bottom by default in JTextPane?

订阅 scroll