简体   繁体   English

我需要使用React.JS水平滚动到div id吗?

[英]I need to horizontally scroll to a div id using React.JS ?

scrollFunc()
{    
     document.getElementById("myID").scrollIntoView({"block":"center"})    
}

I tried scrollIntoView({"block":"center"}) works perfect in chrome but has issues on Internet Explorer ! 我尝试了scrollIntoView({“ block”:“ center”})在chrome中可以正常使用,但是Internet Explorer上有问题!

scrollIntoView has partial support in IE/Edge. scrollIntoView在IE / Edge中具有部分支持。

scrollIntoView({"block":"center"}) is not supported by IE/Edge IE / Edge不支持scrollIntoView({"block":"center"})


  • You have the option scrollIntoView(true) which corresponds to 您有一个选项scrollIntoView(true)对应于

scrollIntoView({block: "start", inline: "nearest"})

  • You have the option scrollIntoView(false) which corresponds to 您有选项scrollIntoView(false)对应于

scrollIntoView({block: "end", inline: "nearest"})


I would recommend using other API or approach if you need {"block":"center"} . 如果需要{"block":"center"}我建议使用其他API或方法。

Read more about it here. 在此处了解更多信息。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView https://caniuse.com/#search=scroll https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView https://caniuse.com/#search=scroll

Give this a try, 试试看

To get the position of any element in page, you can use 'getBoundingClientRect' method like this, and window.scrollTo() to scroll to that particular location. 要获取页面中任何元素的位置,您可以像这样使用'getBoundingClientRect'方法,并使用window.scrollTo()滚动到该特定位置。

var htmlElement = document.getElementById('container'); var elementPosition = element.getBoundingClientRect() window.scrollTo(elementPosition.left, 0)

Also refer this link for more learning: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 另请参阅此链接以获取更多信息: https : //developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

在中使用.map<div> 标签-react.js</div><div id="text_translate"><p> 我真的很感激任何帮助。 所以该项目是一个反应项目。</p><p> 这是我获取<a href="https://i.stack.imgur.com/WelCP.png" rel="nofollow noreferrer">的内容:获取请求</a></p><p>这是我从服务器响应的内容: <a href="https://i.stack.imgur.com/e2QG3.png" rel="nofollow noreferrer">Response from server</a></p><p> 我试了一下 Postman,看看我收到的是什么类型的 json。 这是它返回的内容: <a href="https://i.stack.imgur.com/yg6IE.png" rel="nofollow noreferrer">Postman 测试</a></p><p>我遇到的问题是我无法 map 收到的数据。 一旦输入链接,我只想在首页上以一种很好的方式显示接收到的数据。</p><p> 是否可以将 map 放在 div 标签内? 或者还有另一种方法吗?</p><p> <em><strong>请注意该项目是作为功能组件编写的</strong></em></p></div> - Using .map in <div> tag - react.js

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法使用React.js refs滚动到div的底部 - Cannot scroll to the bottom of a div using React.js refs 在滚动 React.js 上更新 ID 标签 - Updating an ID tag on scroll React.js 从React.js中的div获取ID - Getting ID from div in React.js 我需要帮助生成标题。 使用react.js - I need help generating header. using react.js 使用 react.js 滚动动画 - Animate on scroll using react.js Div 在 React.js 中没有使用 100% 的高度 - Div is not using 100% of height in React.js 在中使用.map<div> 标签-react.js</div><div id="text_translate"><p> 我真的很感激任何帮助。 所以该项目是一个反应项目。</p><p> 这是我获取<a href="https://i.stack.imgur.com/WelCP.png" rel="nofollow noreferrer">的内容:获取请求</a></p><p>这是我从服务器响应的内容: <a href="https://i.stack.imgur.com/e2QG3.png" rel="nofollow noreferrer">Response from server</a></p><p> 我试了一下 Postman,看看我收到的是什么类型的 json。 这是它返回的内容: <a href="https://i.stack.imgur.com/yg6IE.png" rel="nofollow noreferrer">Postman 测试</a></p><p>我遇到的问题是我无法 map 收到的数据。 一旦输入链接,我只想在首页上以一种很好的方式显示接收到的数据。</p><p> 是否可以将 map 放在 div 标签内? 或者还有另一种方法吗?</p><p> <em><strong>请注意该项目是作为功能组件编写的</strong></em></p></div> - Using .map in <div> tag - react.js 使用React,如何在可滚动div中水平滚动到所选项目? - With React, how can I horizontally scroll to the selected item in a scrollable div? (React.js) 使用箭头键滚动列表 - (React.js) Scroll through list using arrow keys 需要帮助解决我不断收到的 react.js 错误 - Need help on a react.js error that I keep on getting
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM