滚动到 div 中的某个元素

2024-03-21

我有一个绝对定位的 div,它充当页面中心的模式窗口。模式窗口可垂直滚动,右侧有一个滚动条。页面本身也可以垂直滚动,右侧有一个滚动条。 我希望能够单击链接并使模式窗口滚动到链接的项目。

我几乎可以使用 target.scrollIntoView(); 来实现这一点但整个页面与模式窗口一起滚动 - 我希望页面不会移动并且只有模式窗口滚动。 如果我使用scrollIntoView(false),页面本身不会滚动,而模式窗口会滚动,但目标元素位于窗口的底部,而我希望它位于顶部。

有什么方法可以手动偏移 div 中目标的位置吗?即,如果我使用scrollIntoView(false),目标将显示在div的底部 - 如果我可以将其偏移视图窗口的高度,我应该能够将其移动到顶部..?

注意:我不能为此使用 JQuery 等。

预先感谢您的任何帮助。


这是一个现场演示,我认为它可以满足您的需求:http://jsfiddle.net/QN3mK/ http://jsfiddle.net/QN3mK/

执行此操作的代码是这样的:(主要检查scrollFunc()功能)

function scrollFunc() {
    var est = document.getElementById('est');
    var docPos = f_scrollTop();
    est.scrollIntoView();
    window.scrollTo(0,docPos);
}

function f_scrollTop() {
    return f_filterResults (
        window.pageYOffset ? window.pageYOffset : 0,
        document.documentElement ? document.documentElement.scrollTop : 0,
        document.body ? document.body.scrollTop : 0
    );
}

function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
        n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

后两个函数只是我发现的获取页面当前滚动位置的跨浏览器兼容方式。所以它的作用是找到一个元素(大概在可滚动 div 内),获取页面的当前滚动位置,将元素滚动到视图中(这会将其放在可滚动 div 的顶部),然后将页面位置重置回来到原来的地方。可能不是一个理想的解决方案,但它会完成工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

滚动到 div 中的某个元素 的相关文章

随机推荐

  • @material-ui/core 和 @types/material-ui 是什么关系?

    这里我看到一个使用material ui 的示例项目 我看到 package json 文件中有以下包 dependencies material ui core 1 4 1 devDependencies types material u
  • 基本页或基本母版页或嵌套母版页?

    我有一个包含两个母版页的网站 一个用于一列布局 一个用于两列布局 它们嵌套在提供通用页眉和页脚的母版页中 我希望每个内容页面都具有功能 我是不是该 创建一个页面基类并在我的内容页面中继承它 或者 创建一个母版页基类并在我的嵌套母版页级别之一
  • 编写依赖于其他键的更复杂的 json 模式

    我一直在编写简单的 JSON 模式 但遇到了一个稍微复杂一点的 API 输入调用 我有一条宁静的最终路线 可以采用 3 种截然不同类型的 JSON 本地主机 foo 可以采取 类型 冰淇淋 锥体 华夫饼 or 类型 热狗 小圆面包 小麦 如
  • Onclick 图像按钮 - 逻辑没有意义[重复]

    这个问题在这里已经有答案了 我对 Javascript html 中这个非常简单的 onClick 函数感到非常困惑 我知道对此有很多问题 但鉴于我的脚本的作用 或者在本例中没有 无法完全找到答案 它应该很简单 但由于某种原因 逻辑也没有像
  • 使用 @PersistenceContext 为空 EntityManager

    我正在尝试使用 Spring Boot 的简单编码 在实体管理器中使用 PersistenceContext 在 MySQL 中创建一个对象 但我发现我的实体管理器对象为空 不知道为什么 因为使用的方法实体管理器有 transaction注
  • 在 ASP.NET 应用程序中是否强制注入 DbContext .InPerRequestScope?

    我一直在我的 ASP NET MVC3 门户中使用 Ninject IoC 容器 每当我注入实体框架时DbContext in PerThread范围 我的数据不一致 在对实体进行更改后一段时间内不会显示更改等 在我切换 IoC 配置以解析
  • 在 PHPStorm 中复制并粘贴字符串(波斯语、阿拉伯语)是错误的

    在 PHPStorm 中复制并粘贴字符串 波斯语 阿拉伯语 是错误的 我的字符串是 巴巴尼 巴尼巴巴 描述如图 如何解决这个问题呢 在安装目录下的文件中bin idea properties add one以下的 editor new re
  • 如何在Jboss AS 7.0中启用Quartz调度?

    Quartz 似乎没有包含在 Jboss AS 7 0 Final 完整版 的默认安装中 当尝试加载消息驱动 Bean MDB FareMonitorBean 时 我的 EAR 部署似乎失败 该MDB 是quartz 调度执行的内容 错误信
  • 当方法尝试使用可以为空的字段时抛出哪个异常? [复制]

    这个问题在这里已经有答案了 我实际上正在从事框架开发 这意味着需要非常强大的编码方法 我面临一个问题 我不知道需要抛出哪个 System Exception 派生类 基本上情况是 我有一个类 其中的字段可以由构造函数选择性地初始化 并且具有
  • 如何在 Android 中找到附近的应用程序用户?

    我正在制作一个应用程序 需要能够找到附近的人 他们是我的应用程序的用户 我看了很多类似问题的答案 似乎我别无选择 只能不断将用户的当前位置上传到服务器 并在必要时获取附近的用户列表 那么我的问题是 1 要获取附近的列表 应该有一些计算距离的
  • Zuul 调用的基本身份验证服务

    我是 Zuul 作为边缘服务器 所以所有请求都经过此边缘服务器 我有一个微服务A A的所有Web服务都受到基本身份验证的保护 我们如何通过Zuul代理来调用A b 的服务呢 我应该为消息添加标头吗 这是我的 Zuul 过滤器 public
  • FullScreenChange 事件不起作用

    我尝试绑定 FullScreenChange 事件 但它不起作用 也许我做错了什么 document bind webkitfullscreenchange mozfullscreenchange fullscreenchange func
  • _1 是 C++0x 的一部分吗?

    我见过two https stackoverflow com questions 4008369 recent answers https stackoverflow com questions 4009530 using 1作为纯 C 0
  • PyArrow 表:过滤行

    我有一个RecordBatch从 Plasma DataStore 中 我可以将其读入pyarrow RecordBatch or a pyarrow Table 我现在尝试在将其转换为 pandas 之前过滤掉行 to pandas 有没
  • 当我没有使用任何广告服务时,应用程序因“IDFA 不正确”而被拒绝

    I use 谷歌分析在我的应用程序中 所以它需要广告支持框架 从昨天开始 当我尝试发布更新时 我的应用程序被拒绝 并显示以下错误消息 亲爱的开发者 我们发现您最近的交货存在一个或多个问题 Zee新闻英语 为了处理您的交货 需要解决以下问题
  • 在 pdf 中添加撤销详细信息,同时签名

    我已经使用 PC 上附加的数字令牌对 pdf 进行了数字签名 使用库 itext Sharp 附加相同的内容 当我在 adobe reader 中打开相同内容时 它显示无法执行撤销 当我看到详细信息时 它显示颁发者证书之一被撤销未检查错误
  • 仅包含数据框中每列的异常值

    我有一个数据框如下 chr leftPos TBGGT 12 try 324Gtt AMN2 1 24352 34 43 19 43 1 53534 2 1 1 9 2 34 15 7 9 18 3 3443 100 4 4 9 3 344
  • 卡夫卡领导者选举什么时候发生?

    Kafka High Level Producer 何时以及多久选举一次领导者 它是在发送每条消息之前执行还是仅在创建连接时执行一次 每个代理都有有关主题 和分区 及其领导者列表的信息 每当新领导者当选或分区数量发生变化时 动物园管理员都会
  • Keras 1.0:获取中间层输出

    我目前正在尝试可视化 Keras 1 0 中中间层的输出 我可以使用 Keras 0 3 实现 但它不再起作用了 x model input y model layers 3 output f theano function x y 但我收
  • 滚动到 div 中的某个元素

    我有一个绝对定位的 div 它充当页面中心的模式窗口 模式窗口可垂直滚动 右侧有一个滚动条 页面本身也可以垂直滚动 右侧有一个滚动条 我希望能够单击链接并使模式窗口滚动到链接的项目 我几乎可以使用 target scrollIntoView