有没有办法以编程方式执行某些操作，例如使用水平滚动滚动到 CSS 网格上的特定点？例如，如果 CSS 网格一次只能容纳屏幕上的一列，是否有办法使用滚动或捕捉之类的方法，使其默认显示第 3 列？
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>
<style>
:root {
--gutter: 20px;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px repeat(var(--total), calc(100% - var(--gutter) * 2)) 10px;
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
}
.app {
width: 500px;
height: 200px;
background: #DBD0BC;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="app">
<ul class="hs full">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
<script type="text/javascript">
var root = document.documentElement;
const lists = document.querySelectorAll('.hs');
lists.forEach(el => {
const listItems = el.querySelectorAll('li');
const n = el.children.length;
el.style.setProperty('--total', n);
});
</script>
</body>
</html>我不知道从哪里开始尝试让它给出想要的结果
也许这可以帮助您入门。根据您正在做的事情，您可能需要在多个
offsetLeftoffsetParentliul.hsvar root = document.documentElement;
const lists = document.querySelectorAll('.hs');
lists.forEach(el => {
const listItems = el.querySelectorAll('li');
const n = el.children.length;
el.style.setProperty('--total', n);
});
let scrlCan = document.querySelector('ul.hs.full');
let ulChildren = scrlCan.children;
setTimeout ( () => {
scrlCan.scrollTo( {left: ulChildren[2].offsetLeft , behavior: 'smooth' });
}
, 1000);<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>
<style>
:root {
--gutter: 20px;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px repeat(var(--total), calc(100% - var(--gutter) * 2)) 10px;
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
}
.app {
width: 500px;
height: 200px;
background: #DBD0BC;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="app">
<ul class="hs full">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
</body>
</html>