vue 按钮固定在某个位置

最新推荐文章于 2024-03-07 15:27:09 发布

原创最新推荐文章于 2024-03-07 15:27:09 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一种基于@scroll事件的左右滑动组件实现方法，通过监听滚动事件，调整按钮位置，确保其始终跟随滚动条。适用于需要实现平滑滑动效果的网页应用。

我是左右滑动

原理是@scroll，直接上代码

template

<div id="wechats" class="wechat-list" @scroll="scrollChange()">
     <div class="wechat“>你的内容</div>
     <div id="chooseBtn" class="wechats-button">你的图标</div>
</div>

js

scrollChange () {
	console.log('scrollChange')
	let scw = document.getElementById('wechats').clientWidth
	let sw = document.getElementById('wechats').scrollWidth
	let sl = document.getElementById('wechats').scrollLeft
	if (sw > scw) {
		document.getElementById('chooseBtn').style.marginRight = -sl + 'px'
	} else {
		document.getElementById('chooseBtn').style.marginRight = 0 + 'px'
	}
}