一段js用来控制左侧的导航栏滑到底部时固定右侧继续滑动,但问题是将页面滚动到下边刷新左边不会滚下来了

JavaScript029

一段js用来控制左侧的导航栏滑到底部时固定右侧继续滑动,但问题是将页面滚动到下边刷新左边不会滚下来了,第1张

依靠css 将页面

document.documentElement.style.overflow='hidden'

document.body.style.overflow='hidden'//手机版设置这个。

如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。

<style>

ul{

margin:0px

padding:0px

}

li{

float:left

cursor:pointer

}

.map_div{

width:900px

height:40px

background-color:#000000

overflow:hidden

}

#dh_li{

width:800px

height:40px

background-color:#000000

white-space:nowrap

text-overflow:ellipsis

overflow:hidden

text-overflow:ellipsis

display:block

after:content:"..."

}

#dh_li li{

width:150px

height:40px

background-color:#000000

color:#FF0000

border-right:1px solid #FF0000

text-align:center

padding-top:10px

overflow:hidden

}

#dh_li li a:link{

color:#FF0000

}

#dh_li li a:visited{

color:#FF0000

}

#dh_li li a:hover{

color:#FF0000

}

.dh_li{

width:50px

height:40px

font-size:20px

font-weight:bold

color:#FF0000

text-align:center

padding-top:10px

background-color:#CCCCCC

}

</style>

<body>

<div class="map_div">

<ul>

<li id="dh_li">

<div style="width:1500px">

<ul>

<li><a href="#">网站首页</a></li>

<li><a href="#">公司简介</a></li>

<li><a href="#">产品展示</a></li>

<li><a href="#">新闻咨询</a></li>

<li><a href="#">热点咨询</a></li>

<li><a href="#">合作伙伴</a></li>

<li><a href="#">网站论坛</a></li>

<li><a href="#">在线咨询</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

</li>

<li id="left_" class="dh_li" onclick="move_left()">←</li>

<li id="right_" class="dh_li" onclick="move_right()">→</li>

</ul>

</div>

</body>

<script>

var demo=document.getElementById("dh_li")

function move_right()

{

if(dh_li.scrollLeft<=(1500-800))

dh_li.scrollLeft+=150

}

function move_left()

{

if(dh_li.scrollLeft>=0)

dh_li.scrollLeft-=150

}

</script>