首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

scrollIntoView()方法导致整个页面产生偏移

问题描述 今天在做页面UI改版的时候发现,我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候,让左侧题目滚动到页面可视区域。...scrollIntoView 如果使用,我有篇文章专门写了 scrollIntoView 的简单使用:scrollIntoView() 让元素进入可视区域 · Issue #167 但是现在有个问题就是,当点击题目编号的时候...,除了题目会滚动到可视区域,整个页面也会稍稍往上滚动,导致页面错位。...如下图所示,当我点击第9题的时候,左侧第9题移动到视口中,但是整个页面包括导航栏都往上移动了,且无法在回来,整个页面是没有滚动条的。 ?...animate 函数使用方法:https://jquery.cuishifeng.cn/animate.html 如果不使用 jQuery 的话,由于scrollTop 是js属性,不是css属性,

4.1K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iOS微信浏览器input聚焦导致页面上,不能恢复的解决方法

    H5页面在iOS系统微信浏览器中,input focus 聚焦时页面会被上推,导致页面整体上。...blur 失焦后不能恢复,再次点击 input 时没反应,不能聚焦,无法输入内容,这时候需要滑动一下页面才能恢复正常。...最后发现是因为 iOS 中 input 聚焦时会导致页面上,失焦后页面不能恢复,但是 input 会恢复之前的位置(或者说下移)。...这时再点击 input 是没反应的,就好比 input 身体虽然下来了,但是魂儿还在上面,也可以理解为 input 发生了位移/偏移。...解决办法: 比较简单的思路, input 失焦时,页面滚动到顶部(以 jQuery 为例): $('input').on('blur',function(){     window.scroll(0,0

    3.2K10

    jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

    ,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等...就上述示例代码来说,我们应该在页面中定义一个 class 为 content 的 内容。...例: width:100px;height:100px;overflow:auto; 完成上述的操作之后,带有滚动条的内容的滚动条,就变成这个插件的默认样式了。...) "pixels"(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子 scrollButtons:{ scrollSpeed:Integer }:设置点击滚动按钮时候的滚动速度(默认 20)...scrollTo 用法:$(selector).mCustomScrollbar("scrollTo",position); 你可以使用这个方法自动的滚动到你想要滚动到的位置。

    14.1K30

    让div等级元素水平以及垂直居中的解决办法

    在本文中,我将给大家讲述如何用CSS和jQuery两种方法让div等级元素水平和垂直居中。...,最后将该div等级元素分别左移和上,左移和上的大小就是该div等级元素宽度和高度的一半。    ...如果当页面div等级元素宽度和高度是动态的,比方说需要弹出一个div等级元素元素层并且要居中显示,div等级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。    ...实现水平和垂直居中  原理:jQuery实现水平和垂直居中的原理就是通过jQuery设置div等级元素的CSS,获取div等级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口 的宽度减去该div...,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。

    1.8K20

    算法之路(四)----汉诺塔(又称河内之塔)

    问:如何?最少要移动多少次? ? ? 3个圆盘的汉诺塔移动 ? 4个圆盘的汉诺塔移动 传说 最早发明这个问题的人是法国数学家爱德华*卢卡斯。 传说印度间寺院有三根柱子,上串64个金盘。...如果N=15,最少需移动32767次;这就是说,如果一个人从3岁到99岁,每天移动一圆盘,他最多仅能移动15。如果N=20,最少需移动1048575次,即超过了一百万次。...假设有A、B、C 三个塔,A塔有N盘,目标是把这些盘全部移动到C塔。那么先把塔顶部的N-1盘移动到B塔,再把A塔剩下的大盘移动到C,最后把B塔的N-1盘移动到C。...每次移动多于一盘时,则再次使用上述算法来移动。 怎么来理解呢? 我们可以倒着理解,要将A塔上的所有圆盘移动到C塔,且所有圆盘是下大上小。...当第N个圆盘从A移动到C之后,又得把N-1个圆盘从B塔移动到C塔,这样工作就完成了。 但是怎么把A塔上的N-1个圆盘移动到B塔呢?

    1.4K20

    小程序开发基础-scroll-view 可滚动视图区域

    scroll-into-view为scroll-view的属性,类型为String类型,表示值应为子元素的id,甚至哪个方向可滚动,则在哪个方向滚动到该元素。...,下一个视图,如同翻页的效果,点击按钮切换到下一个view,另一个按钮的点击效果为,设置滚动条位置实现画面滚动,就是下移或上等。...click me to scroll into view为点击我跳转到下一个view视图 click me to scroll为点击我进行滚动 <!...表示距底部或者右边多远时时(单位为px),触发scrolltolower事件 scroll-top 表示设置竖向滚动条位置 scroll-left 表示设置横向滚动条位置 scroll-into-view 表示指应为子元素...scroll-into-view为滚动到该元素,简要的说。总的来说,值应为子元素id(id不能以数字开头)。

    2.4K40

    Vim命令使用说明

    ctrl+v进入可视模式。 替换模式:正常模式下,按R进入 文档操作 :e file –关闭当前编辑的文件,并开启新的文件。 如果对当前文件的修改未保存,vi会警告。 :e!...:n1,n2w filename – 选择性保存从n1行到另n2行的内容。 :wq – 保存并退出。 ZZ – 保存并退出。 :x – 保存并退出。...w: 前一个单词,光标停在下一个单词开头; W: 移动下一个单词开头,但忽略一些标点; e: 前一个单词,光标停在下一个单词末尾; E: 移动到下一个单词末尾,如果词尾有标点,则移动到标点; b:...(: 前1句。 ): 后移1句。 {: 前1段。 }: 后移1段。...0: 移动到行首。 g0: 移到光标所在屏幕行行首。 ^: 移动到本行第一个非空白字符。 g^: 同 ^ ,但是移动到当前屏幕行第一个非空字符处。 $: 移动到行尾。

    2.6K10

    不会vim?看这篇就够了!

    +/关键词 文件的路径 作用:打开指定的文件,并且高亮显示关键词 (4)#vim 文件路径1 文件路径2 文件路径3 作用:同时打开多个文件 ---- 四、命令模式 1、光标移动 ①光标移动到行首...按键:shift + 6 即输入 ‘^’ ②光标移动到行尾 按键:shift + 4 即输入 ‘$’ ③光标移动到首行 按键:gg ④光标移动到末行 按键:G ⑤快速移动到指定的行 按键:数字G...ctrl + v,然后按下 ↑↓←→ 方向键来选中需要复制的区块, 按下y键进行复制 image.png ④粘贴: 按键:p 3、剪切/删除 ①剪切/删除光标所在行 按键:dd (删除之后下一行上)...②剪切/删除光标所在行为准(包含当前行),向下删除/剪切指定的行 按键:数字dd (删除之后下一行上) ③剪切/删除光标所在的当前行光标之后的内容,但是删除之后下一行不上 按键:D (删除之后当前行会变成空白行...) ④可视化删除 按键:ctrl + v(可视),上下左右移动,按下D表示删除中的所有行,d表示删的内容 4、撤销/恢复 ①撤销: 按键: u (undo) ②恢复: 按键:ctrl + r

    3.3K00

    JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度

    说到 JS 延时点击,度娘给出的结果几乎都是 js 的延迟点击 Demo,即鼠标产生一个 mousehover 事件之后,延迟多少秒执行点击动作。...本文主要分享一个带时间判断的 js 延时自动点击效果:当鼠标经过页面元素,也就是产生一个 mousehover 事件时,触发 js 计时器,若经过指定时长后,鼠标还在这个元素上,将执行点击动作,否则计时器就清零...张戈研究这个 JS 特效的原因就是,博友 ijustplay 在我博客留言,说联盟的按钮太灵敏了,往往鼠标从浏览器标签页移动到联盟导航,想点击某个博客时,因为经过了导航的菜单,导致导航子页面的切换,体验不是很好...  flag = false;   clearTimeout(timeId);   }); }); 使用很简单,基本看注释就会用了,只要记得修改实际元素 ID,并在代码之前引入 Jquery.js...效果:拖动鼠标自然经过成员导航的菜单按钮,是不会产生点击动作的,只有停留在菜单按钮才会生成点击动作。

    2.2K40

    虚拟化平台上远程连接遇到的几个问题分析

    用一1920*1080*32bit的内存,可以存放下整个屏幕的一帧,这块内存叫做frame buffer。...如果鼠标从point1(x1,y1)移动到point2(x2,y2),如果画图响应很快,那么在显示器上看到的鼠标就移动到对应的位置上,如果画图很慢,就会看到鼠标是一顿一顿的移动到位置上。...3,鼠标速不一致 在vnc上,是一个常见问题。可以看到虚拟机里面的鼠标和外面物理机上的鼠标的位置不一致,而且它们的速不一致。在外面移动了很大一段距离,在虚拟机里面只是移动了一小段。...在物理机上,和虚拟机里面,它们的分标率不一样,vnc客户端在计算鼠标的移动距离的时候,计算了比例,导致出来了速不一致的问题。...物理机上的鼠标已经移动到了新的位置,但是web上的内容需要经过这么长的路径才能更新出来。所以就看到了鼠标拖影。

    6.1K80
    领券