<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
column-gap: 10px;
}
li {
flex-shrink: 0;
width: 180px;
height: 100px;
background-color: #eee;
}
</style>
</head>
<body>
<div
id="mybox"
style="
width: 800px;
height: 300px;
background-color: #ccc;
overflow-x: scroll;
"
>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script>
var element = document.querySelector("#mybox");
element.addEventListener("wheel", function (event) {
// 阻止默認的滾動行為
event.preventDefault();
// 判斷滾輪滾動方向
var direction = event.deltaX > 0 ? "Right" : "Left";
// 根據(jù)滾輪滾動方向調(diào)整元素的scrollLeft屬性
if (direction === "Right") {
element.scrollLeft -= event.deltaY * -1;
} else {
element.scrollLeft += event.deltaY;
}
});
var items = document.querySelectorAll("li");
console.log(items)
items.forEach((item) => {
item.addEventListener("click", scrollToAndCenter);
});
function scrollToAndCenter(event) {
const clickedItem = event.target;
const container = element;
console.log(container.clientWidth)
const containerWidth = container.clientWidth;
const itemWidth = clickedItem.offsetWidth;
const leftBound = clickedItem.offsetLeft;
const centerPosition = leftBound + itemWidth / 2;
// 計算應該滾動的距離涩嚣，使得元素居中
const scrollDistance = Math.max(0, centerPosition - containerWidth / 2);
// 設置滾動條位置
container.scrollLeft = scrollDistance;
}
</script>
</body>
</html>
js橫向滾動列表點擊子元素保持居中顯示
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來粗截，“玉大人惋耙，你說我怎么就攤上這事⌒懿” “怎么了绽榛？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長婿屹。 經(jīng)常有香客問我灭美，道長，這世上最難降的妖魔是什么昂利？ 我笑而不...
- 正文 為了忘掉前任届腐，我火速辦了婚禮铁坎，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘犁苏。我一直安慰自己硬萍，他們只是感情好，可當我...
- 文/花漫 我一把揭開白布围详。 她就那樣靜靜地躺著朴乖，像睡著了一般。 火紅的嫁衣襯著肌膚如雪助赞。 梳的紋絲不亂的頭發(fā)上买羞，一...
- 文/蒼蘭香墨 我猛地睜開眼盖呼，長吁一口氣：“原來是場噩夢啊……” “哼儒鹿！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起几晤，我...
- 正文 年R本政府宣布，位于F島的核電站编兄，受9級特大地震影響轩性，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狠鸳，卻給世界環(huán)境...
- 文/蒙蒙 一揣苏、第九天 我趴在偏房一處隱蔽的房頂上張望悯嗓。 院中可真熱鬧，春花似錦舒岸、人聲如沸绅作。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽俄认。三九已至，卻和暖如春洪乍，著一層夾襖步出監(jiān)牢的瞬間眯杏，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 這幾天由于公司項目緊锉屈，需要上一個新的版本，也中斷了在簡書的分享垮耳。今天給大家介紹一個也是項目中常見的需求——橫向列表...
- 一句話终佛，scroll-view的子元素要inline-block俊嗽，父元素white-space: nowrap;就...
