scrolltop | 易学教程

JavaScript字幕滚动效果

阅读更多关于 JavaScript字幕滚动效果

其中要注意的：overflow:hidden，否则会全部显示，达不到效果。使用时可以对ul.scrollTop >= 195这一句的数字进行设置。达到平滑过渡的作用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <ul id="scroll" style="overflow:hidden;height:100px;width:200px"> <li>滚动效果一</li> <li>滚动效果二</li> <li>滚动效果三</li> <li>滚动效果四</li> <li>滚动效果五</li> <li>滚动效果六</li> <li>滚动效果七</li> <li>滚动效果八</li> <li>滚动效果九</li> <li>滚动效果十</li> <li>滚动效果一</li> <li>滚动效果二</li> <li

h5 input输入框弹键盘弹起再关掉，页面被顶起

阅读更多关于 h5 input输入框弹键盘弹起再关掉，页面被顶起

h5 input输入框弹键盘弹起再关掉，页面被顶起 < div class = "form-item" > 　　 < div class = "label" > 姓名 < / div > 　　 < input type = "text" v - model . trim = "myUserInfo.name" placeholder = "请输入您的姓名" @blur = "input_blur" > < / div > input_blur ( ) { 　　 // document.body.scrollTop = document.documentElement.scrollTop - 1 　　setTimeout ( ( ) => { 　　　　 var scrollHeight = document . documentElement . scrollTop || document . body . scrollTop || 0 　　　　window . scrollTo ( 0 , Math . max ( scrollHeight , 0 ) ) 　　 } , 100 ) } 来源： CSDN 作者：前端黑眼圈链接： https://blog.csdn.net/qq_36595944/article/details/104157344

stepsTips步骤提示

阅读更多关于 stepsTips步骤提示

stepsTips步骤提示概述在线示例源码概述在后台管理的实际项目中，发现没有使用说明文档的话，用户在有些操作上不清楚怎么操作流程才是正确的（也可能是页面不够简明扼要），所以在假期突然想起来做一个步骤提示的插件来在以后项目中应用，参考了部分 jquery.joyride 参数获取的实现，查看源码。在线示例在线示例由于是在iframe下，所以滚动的位置并不正确，这个暂时没有处理。在线示例源码 /** * 步骤提示插架 steps * Author: chengzan * CreateTime: 2020-1-23 17:10 * Version: 1.0.001 * */ ; ( function ( global , fn , plugin ) { global [ plugin ] = fn . call ( global ) ; } ) ( window , function ( ) { // 绑定的元素，元素的子元素对应tips配置和内容 let _stepsBindEl ; // callback let _cb ; // 滚动定时器 let timer ; // 获取元素位置和宽高信息 function _getElInfo ( el ) { return { width : el . offsetWidth , height : el .

jQuery---小火箭返回顶部案例

阅读更多关于 jQuery---小火箭返回顶部案例

小火箭返回顶部案例 1. 滚动页面，当页面距离顶部超出1000px，显示小火箭。封装在scroll函数里，当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐藏用fadeIn和fadeOut //当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏 $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $(".actGotop").stop().fadeIn(1000); } else { $(".actGotop").stop().fadeOut(1000); } }) }); 2. 当小火箭出现后，点击小火箭，返回到页面顶部。在外面出册点击事件，获取页面，html或者body, 返回用animate动画函数，到顶部即scrollTop为0，时间可以设置 $(".actGotop").click(function () { $("html,body").stop().animate({ scrollTop: 0 }, 1000); }); 整体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

h5 穿透滚动

阅读更多关于 h5 穿透滚动

引子 h5 页面有弹窗浮层时，浮层之下若产生了滚动，滑动浮层时会让其产生滚动。这是示例页面，移动端访问如下： Origin My GitHub 原因找到的信息里面有两种说法：使用了 -webkit-overflow-scrolling: touch ，另外这个不是标准属性。浮层也是页面的一个元素，浮层的展示正常，页面中的其它元素按照本来的方式展示运作。也就是说这是一个正常的现象，只不过是我们不想要这种效果。针对第一种说法，进行测试验证，这是示例页面，移动端访问如下：发现：跟 -webkit-overflow-scrolling: touch 无关。处理方法在网上找到的资料，主要有两种思路：阻止 touch 相关的事件。弹出浮层时，禁止元素滚动，浮层消失时，恢复滚动。第一种思路在很多资料中提到有明显的缺陷：弹出层的滚动会有问题。会锁死滚动区域。弹出层的事件处理可能会产生影响。较多采用第二种思路，但也有对应的问题：元素滚动的状态切换，会丢失滚动的位置。针对滚动位置丢失问题，采用动态记录滚动位置的方式可以解决。示例代码 // 以下方法使用的前提是产生滚动元素为 body function fixedEle ( ) { var scrollEle = document . body ; // 有可能出现浮层内切换的情况，已经设置了就用重复设置了。

day39—JavaScript缓冲运动

阅读更多关于 day39—JavaScript缓冲运动

转行学开发，代码100天！——2018-04-24 今天继续学习JavaScript运动之缓冲运动。相对于匀速运动，缓冲运动的不同之处在于其速度值是不断变化的，越靠近目标点，速度越小。即可以表示为：speed =( iTarget-curPos)/constNum; 做个简单的例子说明一下这个问题： <input id="btn" type="button" value="开始运动" onclick="startMove(300);"> <div id="div1"></div> <style type="text/css"> #div1{width: 100px; height: 100px;position: absolute;top:50px ;left: 0;background: red;} </style> JavaScript部分如下： <script type="text/javascript"> var timer = null; function startMove(iTarget) { var div1 = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-div1.offsetLeft)/10

h5移动端上下布局

阅读更多关于 h5移动端上下布局

<template> <div class="home" id="home"> <div class="header">头部</div> <div class="content"> <div class="nav">导航</div> <div class="banner">banner</div> <div class="list-box"> <div class="list-tab" :class="{'move':scrollTopMove}">list-tab</div> <ul> <li v-for="item in 100"> {{item}} </li> </ul> </div> </div> <div class="bottom-nav">底部</div> </div> </template> <script> export default { name : 'Gift', data() { return { scrollTop:0 } }, mounted() { var last_known_scroll_position = 0; var ticking = false; let _this = this; function doSomething(scroll_pos) { console.log('scroll_pos',scroll_pos) _this

轻松自动化---selenium-webdriver(python) (十一)

阅读更多关于轻松自动化---selenium-webdriver(python) (十一)

本节重点：控制滚动条到底部有时候我们需要控制页面滚动条上的滚动条，但滚动条并非页面上的元素，这个时候就需要借助 js 是来进行操作。一般用到操作滚动条的会两个场景：注册时的法律条文需要阅读，判断用户是否阅读的标准是：滚动条是否拉到最下方。要操作的页面元素不在吸视范围，无法进行操作，需要拖动滚动条其实，实现这个功能只要一行代码，但由于不懂 js ，所以花了不小力气找到这种方法。用于标识滚动条位置的代码 <body onload= "document.body.scrollTop=0 "> <body onload= "document.body.scrollTop=100000 "> 如果滚动条在最上方的话，scrollTop=0 ，那么要想使用滚动条在最可下方，可以scrollTop=100000 ，这样就可以使滚动条在最下方。场景一先来解决场第一个问题，法律条款是一个内嵌窗口，通过 firebug 工具可以定位到内嵌入窗口可以定位到元素的 id ，可以通过下面的代码实现。 js="var q=document.getElementById('id').scrollTop=10000" driver.execute_script(js) 注：由于没找到合适的例子，所没验证，从参考资料来看这种写法应该没问题，如有请反馈。场景二有滚动条的页面到处可见

博客园漂浮快捷操作

阅读更多关于博客园漂浮快捷操作

正文在看了 Mainz 的博客风格后，想要自己也弄上一个，于是就动手了。尽管效果出来了，但是收藏、评论和推荐应该只在博文页出现，这里还没有做判断。看了一下 Mainz 的代码有些地方还没看懂，需要研究一下。另我的是1024×768小屏，在IE8和Chrome下测试是没有问题的。推荐此文，是和好文要顶用的一样的链接不知道问什么没有效果。 DiggIt(cb_entryId,cb_blogId,1);green_channel_success(this,'谢谢推荐！'); 如果您那里出现了不兼容的问题请告诉我，谢谢。怎么DiggIt(cb_entryId,cb_blogId,1);前面半句不见了代码分析 HTML <div id="divTool"> <a href="#top" title="返回顶部"> <img src="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_db.png" width="24" height="24" /> </a> <a href="http://www.cnblogs.com/IT-Bear/" title="回到主页"> <img src="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_zy.png"

Vue 更新数据页面刷新

阅读更多关于 Vue 更新数据页面刷新

我一直采取的方式比如我一开始有列表数据，我要删除某一数据，之后删除接口请求成功之后，最后重新请求列表数据接口。是不是你跟我一样，今天看见一篇文章利用 provide和inject 处理刷新页面问题 provide / inject 官网文档链接 PS ： provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。本文以真实接口调试，童叟无欺。 App.vue < template > < div id = "app" > < div id = "nav" > < router - link to = "/" > Home < / router - link > | < router - link to = "/about" > About < / router - link > < / div > < router - view v - if = "isRouterAlive" / > < / div > < / template > < script > export default { name : "App" , data ( ) { return { isRouterAlive : true , } ; } , // 父组件中返回要传给下级的数据 provide ( ) {

订阅 scrolltop