1.先写它的body
<body>
<div id="div1">
<div id="div2">
</div>
</div>
<button>我已经认真阅读完</button>
</body>
2.写它的样式
<style>
#div1{
width: 240px;
height: 240px;
overflow: auto;
/* 显示滚动条 */
}
#div2{
width: 420px;
height: 240px;
background:url("./img/13_reading_4k.jpg");
background-size:cover;
/* background: red; */
}
</style>
3.获取到滚动框，背景，按钮
<script>
var div1 = document.getElementById("div1")
var div2 = document.getElementById("div2")
var btn = document.querySelector("button")
</script>
4.滚动框沿x轴滚动时判断
div1.onscroll = function(){
console.log(parseInt(div1.scrollLeft))
if(parseInt(div1.scrollLeft)>187){
btn.style.opacity = "1"
}else{
btn.style.opacity = "0.3"
}
}
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
