在 Angular 4 中单击时滚动到元素

2024-03-13

我希望能够在按下按钮时滚动到目标。我在想这样的事情。

<button (click)="scroll(#target)">Button</button>

而在我的component.ts像这样的方法。

scroll(element) {
    window.scrollTo(element.yPosition)
}

我知道上面的代码无效,但只是为了展示我的想法。我刚刚开始学习 Angular 4,之前没有任何 Angular 经验。我一直在寻找类似的东西,但所有示例都在 AngularJs 中,这与 Angular 4 有很大不同


你可以这样做:

<button (click)="scroll(target)">Scroll To Div</button>
<div #target>Your target</div>

然后在你的组件中:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

Edit:我看到评论指出,由于元素未定义,这不再有效。我创建了一个StackBlitz 示例 https://stackblitz.com/edit/angular-scroll-local-variable在 Angular 7 中它仍然有效。有人可以提供一个不起作用的例子吗?

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

在 Angular 4 中单击时滚动到元素 的相关文章

  • 使用 getElementById 在 javascript 中使用正则表达式进行 Html 表单验证?

    我想使用正则表达式验证 html 表单的示例模式 AAA 111 2222 aa 1234 目前 我的代码要么为所有输入返回 正确 要么为所有输入返回 不正确 并且我无法弄清楚我的问题出在哪里 var x document getEleme
  • 如何从 Firefox 中的选择元素中删除箭头

    我正在尝试设计一个select使用 CSS3 的元素 我在 WebKit Chrome Safari 中得到了我想要的结果 但 Firefox 的表现不佳 我什至不关心 IE 我正在使用 CSS3appearance属性 但由于某种原因我无
  • React.js this.props.data.map() 不是一个函数

    我正在搞乱反应并尝试解析和渲染 json 对象 现在 我只是使用硬编码对象设置它以进行测试 而不是从 ajax 调用中获取它
  • jQuery UI 对话框使用 setTimeout 自动关闭

    我试图让对话框在打开后三秒自动关闭 我尝试过以下方法 setTimeout mydialog dialog close 3000 这是在上下文中 acknowledged dialog dialog height 140 modal tru
  • 拖放图像上传在服务器上不起作用

    我正在尝试实现拖放图像上传 我在网上找到了一个相当简单的脚本并适合我的使用 在我的本地安装中 文件上传得很好 但在服务器上却不行 从我的调试尝试来看 SERVER HTTP X FILENAME 甚至没有被 php 设置 我尝试了以下方法
  • jQuery 问题:它的真正含义是什么?

    function window undefined jquery code jQuery window 它到底意味着什么 是不是也意味着 document ready 或者只是两种不同的东西 已经有两个答案 但这是我对代码缺失端的猜测 fu
  • 将 Angular v12 升级到 v13 时出现“模块未找到”错误

    嗨 开发者和贡献者 我正在努力找出以下错误的问题所在 src app models type ModelType ts 2 0 44 错误 找不到模块 错误 导出字段无法解析目录 请求为 当我将 Angular 版本从 v12 升级到 v1
  • Bootstrap 3 - 使用垂直滚动条水平拖动元素,overflow-y:滚动

    在我的失败之后上一篇文章 https stackoverflow com questions 23586926 bootstrap grid with scrollable affixed column noredirect 1 comme
  • Javascript 访问 Disqus 评论文本框?

    我正在开发一个浏览器扩展 它应该允许我访问文本框中的评论 帖子 现在很多网站都使用 Disqus 作为评论方式 但在输入文本时我无法找到访问 Disqus 评论框的方法 Disqus API 也没有透露太多信息 有人知道访问它的方法吗 解决
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • 将一个 div 放置在另一个 div 的底部

    我有外部 div 和内部 div 我需要将内部 div 放在外部 div 的底部 外层div是有弹性的 例如宽度 70 我还需要将内部块居中 所述化妆的简单模型如下图所示 已在 Firefox 3 Chrome 1 和 IE 6 7 和 8
  • Google Maps JS Api - b.get 不是函数错误(isLocationOnEdge)

    我想检查我的路线上是否有标记 所以我尝试使用 isLocationOnEdge 但收到 TypeError b get 不是函数 错误 这是我的代码 我尝试了几次更改但无法解决问题 var directionsDisplay new goo
  • 函数声明或函数表达式

    我刚刚在块作用域中定义函数时遇到了问题 考虑以下程序 try greet function greet alert Merry Christmas catch error alert error 我希望这个程序能够发出警报Merry Chr
  • 当元素具有多个类时如何在 switch 语句中检查 className

    在下面的示例中 我只想单击该选项以在警报中显示 我正在尝试使用 switch 语句来确定单击了哪个类 如果我的 div 不包含多个类 则我的示例将有效 我尝试使用classList contains在我的 switch 语句中无济于事 有没
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • 为什么对于整数键,“Map”操作比 JavaScript (v8) 中的“Object”慢得多?

    我很高兴使用Map对于在我的 JavaScript 代码库中随处访问的索引 但我刚刚偶然发现了这个基准 https stackoverflow com a 54385459 365104 https stackoverflow com a
  • 网页执行回发时如何停止在注册表单上?

    我正在做我的最后一年的项目 其中 我在一页上有登录和注册表单 WebForm 当用户点击锚点时Sign Up下拉菜单ddlType 隐藏 和文本框 txtCustName txtEmail and txtConfirmPassword 显示
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css
  • 如何制作饼图聚合数据源?

    Using 适用于 ASP NET MVC 的 Kendo UI 完整版 http www kendoui com 版本 2013 3 1119 2013年11月20日 如果我有这段代码 status chart kendoChart da
  • ES6解构对象赋值函数参数默认值

    您好 我正在查看在传递函数参数时使用对象解构的示例对象解构演示 https developer mozilla org en US docs Web JavaScript Reference Operators Destructuring

随机推荐