scrollto

function scrollToTop(){ const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0 ) { window.requestAnimationFrame(scrollToTop); window.scrollTo( 0, c - c / 8 ); } } 来源： oschina 链接： https://my.oschina.net/u/4309973/blog/4258228

问题： I am creating a chat using ajax requests in rails and I'm trying to get a div to scroll to the bottom without much luck. 我正在使用Rails中的Ajax请求创建聊天，并且试图使div滚动到底部没有太多运气。 I am wrapping everything in this div: 我将所有内容包装在这个div中： #scroll { height:400px; overflow:scroll; } Is there a way to keep it scrolled to the bottom by default using JS? 有没有一种方法可以使用JS将其默认滚动到底部？ Is there a way to keep it scrolled to the bottom after an ajax request? 是否有办法在ajax请求后将其滚动到底部？ 解决方案： 参考一： https://stackoom.com/question/18Oi/滚动到div的底部 参考二： https://oldbug.net/q/18Oi/Scroll-to-bottom-of-div 来源： oschina 链接： https://my.oschina

this .$nextTick(() => { window.scrollTop（x, y） }); 这是使用方法但却无效！ 后来发现是HTML对象的问题： 改为： this.$nextTick(() => { document.body.scrollTop（x, y） }); 原因分析： html、body、document、window的区别 html是一门超文本标记语言； document对象代表整个html文档,可用来访问页面中的所有元素； body代表document的主体子对象，除浏览器头部，页面中能够看到的内容都属于body中的内容； window代表浏览器中打开的窗口，代表运行环境。 在javascript中： window对象是一个虚拟的对象，浏览器在打开HTML文档时生成window对象，可以把它看作是你所使用的浏览器的窗口，其地位很高，因为它是浏览器脚本引擎中的globalobject。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。如果文档定义一组帧，则浏览器对原文档生成一个window对象，并对每个帧生成window对象。（ 关于globalobject，可以从javascript脚本引擎的概念中了解到。） BOM的核心对象是window，它表示一个实例。在浏览器中，window对象有双重角色

这两天帮某个项目处理后事，本以为可以轻松搞定，不成想又发现了一个bug..... 背景描述： ios5 提出了支持 position:fixed ，于是乎大家觉得让浮动的图层固定在屏幕最下方容易多了，赶紧用上吧。可是呢。。。页面上又有好多地方需要用到 scrollTo 控制滚动条移动，尤其是页面刚加载完毕需要让浏览器默认的 url 栏消失，一般都用 scrollTo(0,0) 或 scrollTo(0,1) 之类的。。。当这两者混合时就出现问题了， 浮动的div 虽然是你看到的在最下方，但是实际上这个div 内的触控点全都漂移了。 （画外音：通过这件事情，我们明白了一个道理：不能只相信你的眼睛....） 用 iphone 访问地址： http://ztree.me/issueTest/iosFixed.html （注意，此 bug 在 iphone5上不存在！应该是 ios6 系统修正了这个bug。 ） 你就可以重现上图的问题，看触屏的位置，那里没有任何内容，但是点击后会看到灰色阴影，点击后 alert 44，这说明 click 44 这个 li 的位置实际上漂移到了那里。 bug 描述： 通过这个 Demo 可以基本确定 bug 的原因——利用 scrollTo 滚屏时，会导致 position:fixed 的图层视图不变，但对应的 DOM 实际响应位置却跟随 滚动条一起移动了

最近看很多用MarkDown编写文章的小伙伴，都在侧边栏生成了一个目录，于是百度搜了搜，也打算加个目录。 但是百度搜到的结果千篇一律，基本上都是"孤傲苍狼"这位大佬出品，然后就试着加在了自己博客上，然而效果并不是自己想要的，因为他只实现了两级目录，而我想实现多级。 于是就开启了代码改造之旅，经过周折最终终于实现了多级目录（h1~h6标签都会显示）。 客官：小儿，上代码~ 好嘞，来喽。 CSS部分（添加到"设置"下面的"页面定制 CSS 代码"下面） /* 生成博客目录的CSS */ #uprightsideBar { font-size : 12px ; font-family : Arial, Helvetica, sans-serif ; text-align : left ; position : fixed ; /* 将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px */ top : 50px ; right : 0px ; width : auto ; height : auto ; } #sideBarTab { float : left ; width : 30px ; border : 1px solid #e5e5e5 ; border-right : none ; text-align :

不知道大家看源码了没有，其主要是利用嵌套滚动，而且代码相对难理解一些。 最近看到作者的这篇文章， 作者抛弃了嵌套滚动，通过自定义 ViewGroup 的方式实现，相对来说，代码好理解太多了，我也实际体验了一下，体验效果还可以。 仔细看了下源码，作者的思路还是很值得学习的，一开始我以为是默认让内部空间全部展开都失去滚动效果，交给外层，实际看了代码之后发现并没有抛弃 RecyclerView 这些复用，他在其外层 scrollTo的时候，会考虑交给内层控件滚动，感兴趣可以学习一波。 概述 ConsecutiveScrollerLayout是我在GitHub开源的一个Android自定义滑动布局，它可以让多个滑动布局和普通控件在界面上像一个整体一样连续顺畅地滑动。 试想我们有这样一个需求，在一个界面上有轮播图、像九宫格一样的分类布局、几个样式不一样的列表，中间还夹杂着各种广告图和展示各类活动的布局，这样的设计在大型的app首页上非常常见。 又比如像咨询类的文章详情页或者电商类的商品详情页这种一个WebView加上原生的评论列表、推荐列表和广告位。这种复杂的布局实现起来往往比较困难，而且对于页面的滑动流畅性和布局的显示效率要求较高。 在以前我遇到这种复杂的布局，会使用我在Github开源的项目GroupedRecyclerViewAdapter 实现。 https://github.com

window对象 window , self 指向window对象本身 所有全局变量都是window对象的属性 一 . 窗口信息 1. innerHeight 浏览器窗口内容区域高度 2. innerWidth 浏览器窗口内容区域宽度 3. outerHeight 浏览器窗口总高度 4. outerWidth 浏览器窗口总宽度 5. pageXOffset 水平滚动过的像素数 6. pageYOffset 垂直滚动过的像素数 二 . 窗口交互 1. blur ( ) 窗口失去焦点 ( 好像没卵用 ) 2. focus ( ) 窗口获取焦点 ( 好像没卵用 ) 3. open ( < url > ) 打开窗口 4. close ( ) 关闭窗口 ( 有兼容性问题 , 谷歌浏览器只能关闭由js创建的窗口 , 如window . open和a标签 ) 5. stop ( ) 停止载入文档 6. print ( ) 提示用户打印 7. scrollBy ( < x > , < y > ) 相对当前位置滚动 8. scrollTo ( < x > , < y > ) 滚动到指定位置 9. alert ( < msg > ) 提示框 10. confirm ( < msg > ) → < boolean > 确认框 11. prompt ( < msg > , < val > ) → <

问题： I have this input element: 我有这个 input 元素： <input type="text" class="textfield" value="" id="subject" name="subject"> Then I have some other elements, like other text inputs, textareas, etc. 然后，我还有其他一些元素，例如其他文本输入，文本区域等。 When the user clicks on that input with #subject , the page should scroll to the last element of the page with a nice animation. 当用户使用 #subject 单击该 input 时，页面应滚动到页面上具有精美动画的最后一个元素。 It should be a scroll to bottom and not to top. 它应该是滚动到底部而不是顶部。 The last item of the page is a submit button with #submit : 页面的最后一项是带有 #submit 的 submit 按钮： <input type="submit" class="submit" id=

首先，看源码： public void scrollTo(int x, int y) { if (mScrollX != x || mScrollY != y) { int oldX = mScrollX; int oldY = mScrollY; mScrollX = x; mScrollY = y; onScrollChanged(mScrollX, mScrollY, oldX, oldY); if (!awakenScrollBars()) { invalidate(); } } } public void scrollBy(int x, int y) { scrollTo(mScrollX + x, mScrollY + y); } 从源码中可以看到，scrollBy()的内部其实是调用了scrollTo()。在scrollTo()中，调用了onScrollChanged()和invalidate()。onScrollChanged()的作用就是告诉系统（可以理解为Android框架），这个View的scrollTo()或scrollBy()曾经被调用过；而invalidate()是告诉系统，这个View需要被重新绘制。 mScrollX：表示离视图起始位置的x水平方向的偏移量 mScrollY：表示离视图起始位置的y垂直方向的偏移量 分别通过getScrollX()

1. V-Hotkey 仓库地址 : github.com/Dafrok/v-ho… Demo : 戳这里 https://dafrok.github.io/v-hotkey 安装 : npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template> <div v-show="show" v-hotkey="{ 'esc': onClose, 'ctrl+enter': onShow }" > Press `esc` to close me! </div> </template> <script> export default { data() { return { show: true } }, methods: { onClose() { this.show = false }, onShow() { this.show = true }, } } </script> 复制代码 2. V-Click-Outside 仓库地址 : github.com/ndelvalle/v… Demo : codesandbox.io/s/zx7mx8y1o… 安装 : npm install --save v-click-outside