html 让页面分左右两个div区域,都有滚动条可以用鼠标滚轮滚动的那种
发布网友
共2个回答
热心网友
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#box{
width: 100%;
height: 100%;
overflow: hidden;
}
#box div{
float: left;
}
.left{
width: 30%;
border-right: 1px solid gold;
height: 980px;
overflow: auto;
}
.left div{
width: 100%;
height: 200px;
text-align: center;
}
.right{
width: 69%;
height: 980px;
}
</style>
<body>
<div id="box">
<div class="left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
<div class="right"></div>
</div>
</body>
</html>
这种？
热心网友
我用vue.js做了一个，参考代码如下，如果要联系我，请邮件zero@zerotower.xyz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 双开div同步滚动测试</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuescroll"></script>
<div id="app">
<vue-scroll :ops="left" class="left-scroll" @handle-scroll="leftScroll" ref="v-left">
<div class="left" ref="left">
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
</div>
</vue-scroll class="right-scroll" @handle-scroll="rightScroll" ref="v-right">
<vue-scroll>
<div class="right" ref="right">
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
<div class="item-block"></div>
</div>
</vue-scroll>
</div>
</body>
<script>
const vs=new Vue();
const vm = new Vue({
el: '#app',
data() {
return {
msg: 'hello world!',
left:{
vuescroll: {
mode:'native',
//locking:true
},
scrollPanel: {
speed:400,
//scrollingX:false,
//scrollingY:true
scrollingX:false
},
rail: {
keepShow:true,
opacity:0.7,
background:'rgb(229, 229, 229)'
},
bar: {
keepShow:true
}
},
leftCH:0
}
},
created() {},
mounted() {
let rightScrollTop = this.$refs["right"].scrollTop
let that = this;
this.$refs["left"].onscroll = function (e) {
// console.log(this.scrollTop)
that.$refs["right"].scrollTop = this.scrollTop
//console.log(that.$refs["right"].scrollTop)
}
vs.$on("left-change",(e,arg)=>{
//console.log("事件*",e,that.$children[1])
});
},
methods:{
leftScroll(vertical,horizontal,nativeEvent){
//console.log(vertital,horizontal,nativeEvent) 全部打印
//console.log(vertital) //部分打印，高度变化
// console.log(this.$refs['v-right'])//打印得到undefined
let that=this;
let change=vertical.scrollTop-this.leftCH;
this.leftCH=vertical.scrollTop;
console.log(change)
this.$children[1].scrollTo({
y:vertical.scrollTop
},0)
vs.$emit("left-change",vertical.scrollTop)
},
rightScroll(vertital,horizontal,nativeEvent){
}
},
updated(){
console.log("updated")
}
});
</script>
<style scoped>
html {
/*overflow: hidden;*/
}
#app {
height: 550px;
/* overflow: hidden;*/
}
#app {
display: flex;
}
.left,
.right {
height: fit-content;
}
.left {
/*width: 40%;*/
background-color: aquamarine;
/*overflow: auto;*/
}
.right {
/*width: 40%;*/
background-color: red;
overflow: auto;
}
.left .item-block {
height: 1000px;
width: 80%;
background-color: yellow;
margin-top: 20px;
}
.right .item-block {
height: 1000px;
width: 80%;
background-color: rgb(0, 225, 255);
margin-top: 20px
}
.left-scroll .__rail-is-horizontal{
display: none!important;
}
</style>
</html>
