window.scrollTo()

lscho 发布于2019-08-21 17:32 / 3551人阅读

摘要：方法工作上遇到了这样的场景，在聊天页面当用户刷新页面时滚动条置底。若有误，请斧正感谢

scrollTo方法

工作上遇到了这样的场景，在聊天页面当用户刷新页面时滚动条置底。很简单对吧，大概如下范例：




    
    Title

但时实际上这段代码并不能保证用户的每次刷新都能把滚动条置底，但时问题出在哪里呢？
1、经过多方测试发现，但凡在页面打开之后用户改变了滚动条的位置，之后无论怎么刷新都是无效的。（在此之前是有效的）
2、最终发现是history的scrollRestoration属性在作怪，这是一个实验性属性API，我用chrome浏览器做的测试，其默认为auto

scrollRestoration属性允许Web应用程序在历史导航上显式地设置默认滚动恢复行为,也就是说用来控制是否记录用户的滚动条位置

若有误，请斧正！感谢！

云服务器 GPU云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89660.html

原生JS基于window.scrollTo()封装垂直滚动动画工具函数

摘要：概要原生基于封装垂直滚动动画工具函数，可应用与锚点定位回到顶部等操作。封装原因在项目中，遇到需要实现垂直滚动效果的需求，初步想到的方法有两个使用方法，但是这个方法是没有动画效果的，需要手动封装一下。使用的动画函数，缺点比较明显需要引入。概要：原生JS基于window.scrollTo()封装垂直滚动动画工具函数，可应用与锚点定位、回到顶部等操作。封装原因：在vue项目中，遇到需要...

Caizhenhao 2019-08-22 18:31 评论0 收藏0
window.scrollTo()函数注意点(js)

摘要：对页面进行这样的操作发现参数不起作用，也就是坐标。如果想让这个参数器作用，我们的页面宽度要大于浏览器的宽度。 window.scrollTo(50,28)对页面进行这样的操作发现参数50不起作用，也就是x坐标。如果想让这个参数器作用，我们的页面宽度要大于浏览器的宽度。

shengguo 2019-08-19 18:42 评论0 收藏0
[譯] scroll-behavior 滑順的捲動效果

摘要：不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。的方式非常簡單，只要在該元素設定注意是而不是這個方式非常方便不過目前只有支援，查閱。眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲...

PiscesYE 2019-08-21 10:52 评论0 收藏0
[譯] scroll-behavior 滑順的捲動效果

摘要：不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。的方式非常簡單，只要在該元素設定注意是而不是這個方式非常方便不過目前只有支援，查閱。眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲...

james 2019-08-30 13:04 评论0 收藏0
通过focusout事件解决IOS键盘收起时界面不归位的问题

摘要：原因经查是输入框的事件无法冒泡。这时，我们问题得到解决了，当从输入框输入内容，然后点击键盘的完成收起键盘，效果符合我们的预期。输入框失去焦点，要把键盘推出页面的滚动部分还原。问题症状今天在开发一个移动端的 H5 页面时，遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状：页面结构出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的...

vvpale 2019-08-02 15:34 评论0 收藏0