- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想建立一个索引字母。当我单击字母(例如 A、B、C)时。它应该滚动到所属的标题。我在这里使用了 scrollIntoView 。除了“block:start”,一切都很好。当我想滚动到开始的标题时,整个页面随容器一起滚动。
这是我关于问题的动图
这是我的 html & css & javascript 代码。
const scrollTo = id => {
let ref = document.getElementById(id)
if (ref /* + other conditions */) {
ref.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "start",
})
}
<div className="glossary">
<div className="glossary-items grid">
<div className="d-flex ">
<div className="glossary-letters ">
<ul>
{letter.map(item => (
<li onClick={() => scrollTo(item)}>
<a> {item}</a>
</li>
))}
</ul>
</div>
<div className="glossary-titles">
<ul>
{glossary.map((item, index) => (
<div key={item.group}>
<li id={item.group}>{item.group}</li>
{item.children.map((item2, i) => (
<li key={i}>
<Link
activeClassName="glossary-titles-active"
to={`/en/sozluk/${item2.first_name + item2.id}`}
>
{item2.first_name}
</Link>
</li>
))}
</div>
))}
</ul>
</div>
</div>
<div className="glossary-content ml-5">
<Router>
<Glossary path="en/sozluk/:id" />
</Router>
</div>
</div>
</div>
最佳答案
There is related question to that
您可以使用父元素的scrollTo
函数来滚动到特定的子元素。
示例
const { useState, useEffect, useRef } = React;
const App = () => {
const [list, setList] = useState([]);
const [keywords, setKeywords] = useState([]);
const refs = useRef(null);
const parentRef = useRef(null);
useEffect(() => {
const newList = Array(25).fill(0).map((pr, index) => String.fromCharCode(65 + index));
const newKeywords = newList.flatMap(pr => [pr, ...newList.map(npr => pr + npr)]);
refs.current = newList.reduce((acc, letter) => {
acc[letter] = React.createRef();
return acc;
}, {});
setList(newList);
setKeywords(newKeywords);
}, [])
const onClick = ({target: {dataset: {letter}}}) => {
const element = refs.current[letter].current;
const parent = parentRef.current;
const onScroll = () => {
const relativeTop = window.scrollY > parent.offsetTop ? window.scrollY : parent.offsetTop
parent.scrollTo({
behavior: "smooth",
top: element.offsetTop - relativeTop
});
}
window.removeEventListener("scroll", onScroll);
window.addEventListener("scroll", onScroll);
onScroll();
/*
element.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "start",
})
*/
}
const tryAssignRef = (letter) => {
return list.indexOf(letter) > -1 ? {ref: refs.current[letter]} : {};
}
/// ...{ref: {refs.current['A']}}
return <div className="container">
<div className="header">
</div>
<div className="body">
<div className="left">
<div className="letters">{list.map(pr => <div className="letter" onClick={onClick} data-letter={pr} key={pr}>{pr}</div>)}</div>
<div ref={parentRef} className="keywords">{keywords.map(pr => <div {...tryAssignRef(pr)} key={pr}>{pr}</div>)}</div>
</div>
<div className="right">
</div>
</div>
</div>
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
.container, .body, .left {
display: flex;
}
.container {
flex-direction: column;
}
.header {
flex: 0 0 100px;
border: 1px solid black;
}
.body {
height: 1000px;
}
.left {
flex: 1;
}
.right {
flex: 2;
}
.left {
justify-content: space-between;
}
.letter {
padding: 2px 0;
cursor: pointer;
}
.letters, .keywords {
padding: 0 10px;
}
.keywords {
overflow-y: scroll;
}
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
关于javascript - scrollIntoView 整个页面向下移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62169922/
我正在制作一个网站,并制作了将元素滚动到视图中的JavaScript代码,我按下按钮的次数越多,滚动到视图中的元素的ID应该越高。它在Edge和Firefox上运行正常,但在Chrome上,它只在第一
我正在制作一个网站,并制作了将元素滚动到视图中的JavaScript代码,我按下按钮的次数越多,滚动到视图中的元素的ID应该越高。它在Edge和Firefox上运行正常,但在Chrome上,它只在第一
这个方法看起来是为了测试,但实际上我需要在使用更多小部件重建 UI 后将一个小部件滚动到屏幕上。 这存在于 GWT 世界中。 有什么方法可以在 Flutter 中实现这一点? 最佳答案 您可以使用 s
我有一个输入字段,它位于 (blur) 上或 (change)触发一个函数,该函数应该将页面滚动到下一个元素 block 。由于我忽略的原因,它不起作用,尽管在 (click) 上使用时它工作正常与按
我有一个嵌套的子容器,当我尝试 scrollIntoView 时,它破坏了父容器。我不明白为什么它会这样。请帮我解决这个问题。 请查看下面或 jsfiddle 上的代码 function moveTo
我想建立一个索引字母。当我单击字母(例如 A、B、C)时。它应该滚动到所属的标题。我在这里使用了 scrollIntoView 。除了“block:start”,一切都很好。当我想滚动到开始的标题时,
我有两个列表框的 View : 列表框 1 元素:A、B、C。 列表框 2 元素:...、A、...、B、...、C、...(长列表)。 当用户在列表框 1 中选择一个元素时,我想在列表框 2 中也将
我使用的是 Javascript(没有 jQuery),并且我有一个弹出的子菜单元素,它有时会超出查看器的底部,所以我使用scrollIntoView让子菜单立即移动以包含所有内容行项目完全在视口(v
我的网站有以下代码: function clickMe() { var element = document.getElementById('about'); element.scrollIn
使用javascript,我们可以使用- document.getElementById('pluginsource_wrapper').scrollIntoView(); 我可以理解scrollIn
当屏幕到达引用点(在方法滚动内部)时,如何停止滚动到 View ?(当屏幕到达其引用点时,我向上滚动一点,代码自动返回到引用点) interface Props { section: numb
如何制作 scrollIntoView只滚动直接父级(例如 div 和 overflow-y: scroll; )而不是整个页面? 我有一个网络界面,我正在为一个内部的、非常具体的目的而制作。我页面上
var mediaIdForFocus = 'mediaIdForFocus; ?>'; if(mediaIdForFocus) $('#flagimg'+mediaIdForFocus).get(0
我有一个非常基本的 scrollIntoView 函数,每当我单击导航栏中的链接时它就会运行。我遇到的问题是,当页面加载时,它会快速捕捉到滚动位置,然后又回到顶部。我怎样才能让它不会在页面的开头对齐?
我遇到一个问题,即在移动设备上使用 select2 jQuery 插件会出现问题,即,当下拉菜单被激活并且它在页面的底部时,虚拟键盘会覆盖选择选项。 为了解决这个问题,我想在页面打开之前将 selec
scrollIntoView() 函数有问题。我有一棵树和两个按钮: 首先将树滚动到底部节点 第二个将树滚动到顶部节点 我不知道我应该怎么做,这个滚动操作总是将节点滚动到树的顶部。我的意思是这个 fi
我正在使用 vanilla JS 让按钮平滑地向下滚动到 div 元素(目标 id) 我的代码是这样的: this.myButton.addEventListener("click",load_sec
我在事件目标上使用 scrollIntoView() 以确保它在其具有 overflow: scroll 的父项中可见,这主要是出于可访问性原因。 我的问题是我还有与该元素关联的点击事件,当点击事件也
有什么办法可以预防 scrollIntoView() 影响我尝试过的滚动监听器 evt.data.stopPropagation(); 和 elementos.scrollIntoView().
当我们使用 scrollIntoView(true) 时,整个页面布局向上移动。根据我的要求,我需要使用 true 参数。我需要避免这个举动。我在 https://jsfiddle.net/7v4t3
我是一名优秀的程序员,十分优秀!