Question

我有一个问题困扰着我。

我创建了一个jquery动画，它从左侧和右侧滑动元素，但是右侧越过页面边缘会触发滚动条，我想隐藏它;这是整个代码：

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset=utf-8 /> 
<title>test sliders</title> 
<link rel="icon" href="favicon.png" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon"/>
<style>
body{background-image: url('2.jpg');width:100%;}
#slidecontainerl{
position:absolute;
top:5%;
min-height:200px;
left:0;
}
#slidewindowl{
border:1.5px solid black;
position:absolute;
left:0;
width:199px;
height:98%;
top:1%;
background-color:#d3d3d3;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#slidetabl{
position:absolute;
left:200px;
width:40px;
height:70px;
top:50%;
margin-top:-35px;
background-color:#111;
border:1.5px solid black;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#slidecontainerr{
position:absolute;
top:5%;
min-height:200px;
right:0;
}
#slidewindowr{
border:1.5px solid black;
position:absolute;
right:0;
width:199px;
height:98%;
top:1%;
background-color:#d3d3d3;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
overflow:hidden;
}
#slidetabr{
position:absolute;
right:200px;
width:40px;
height:70px;
top:50%;
margin-top:-35px;
background-color:#111;
border:1.5px solid black;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui.css">
</head>

<body>

<div id="slidecontainerl"style="left:-201px;height: 90%;width: 200px;">
<div id="slidewindowl">
<h3>Links</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div id="slidetabl">
<img src="slidel.png">
</div>
<script>
$('#slidecontainerl').hover(function () {
$(this).stop().animate({left:"0px"},502);     
},function () {
var width = $(this).width() -0;
$(this).stop().animate({left: - width  },502);     
});
</script>
</div>

<div id="slidecontainerr"style="right:-201px;height: 90%;width: 200px;">
<div id="slidewindowr">
<h3>Links</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div id="slidetabr">
<img src="slider.png">
</div>
</div>

<script>
$('#slidecontainerr').hover(function () {
$(this).stop().animate({right:"0px"},502);
},function () {
var width = $(this).width() -0;
$(this).stop().animate({right: - width  },502);     
});
</script>

</div>
</div>
</div>
</body>
</html>

它可能非常简单，我错过了溢出隐藏杀死jquery

感谢您的帮助，

丹

Answer 1

好的编辑，我看了一下你的jsfiddle

here is an update of your fiddle

将这些添加到body和html

html, body {
  max-width:100%;
  overflow-x:hidden;
}

并在 slidewindowr 上添加

position:fixed;

而不是position:absolute;

注意..我相信这可以达到您想要的效果，但您可能需要查看所有宽度计算。并可能对其进行重组。

Jquery干扰后，垂直滚动条隐藏

1 个答案: