0
Ich schrieb einen HTML-Code, der in Firefox erfolgreich funktioniert (begrenzte Bildlauf von rechts nach links), aber haben eine unendliche Bildlauf in Google Chrome.Unterschied zwischen horizontalen Scroll in Firefox und Chrom
style.css
@import url('font/fonts.css');
@import url('font/icons.css');
*{margin: 0;padding: 0;outline: none}
a img{border: none}
a{text-decoration: none}
body{
direction: rtl;
background: #222226
}
body,html{width: 100%;height: 100%}
.tab-menu-scroller{
width: 325px;
height: 50px;
position: relative
}
.tabs-menu-container{
width: 325px;
height: 50px;
background: #17171a;
overflow-x:hidden;
margin-top: 10px;
position: relative
}
.tabs-movie-menu{
position: absolute;top: 0;right:0;
height: 50px;
min-width: 3000px
}
.tabs-movie-menu li{
position: relative;
height: 50px;
list-style: none;
display: table-cell;
float: right;
font: .75em 'IRSans',Sans-serif;
font-weight: 500;
line-height: 50px;
vertical-align:middle
}
.tabs-movie-menu li a{
display: block;
height: 50px;
padding: 0 20px;
color: #cacae6
}
.tabs-movie-menu .current a{
color: #f57663;
border-bottom: solid 2px #f57663;
box-sizing: border-box
}
.tab-menu-scroller .tabs-arrow{
width: 50px;
height: 50px;
position: absolute;
z-index: 10;top: 0;
cursor: pointer;
color: #9797a6
}
.tab-menu-scroller .right{
right: 0;
background: -moz-linear-gradient(left, rgba(23,23,26,0) 0%, rgba(23,23,26,1) 100%);
background: -webkit-linear-gradient(left, rgba(23,23,26,0) 0%,rgba(23,23,26,1) 100%);
background: linear-gradient(to right, rgba(23,23,26,0) 0%,rgba(23,23,26,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0017171a', endColorstr='#17171a',GradientType=1);
}
.tab-menu-scroller .left{
left: 0;
background: -moz-linear-gradient(left, rgba(23,23,26,1) 0%, rgba(23,23,26,0) 100%);
background: -webkit-linear-gradient(left, rgba(23,23,26,1) 0%,rgba(23,23,26,0) 100%);
background: linear-gradient(to right, rgba(23,23,26,1) 0%,rgba(23,23,26,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#17171a', endColorstr='#0017171a',GradientType=1);
}
.tab-menu-scroller .tabs-arrow span{
display: block;
width: 30px;
height: 50px;
font-size: 1.4em;
text-align: center
}.tab-menu-scroller .tabs-arrow span:before{line-height: 50px}
.tab-menu-scroller .left span{float: left}.tabs-menu-container .right span{float: right}
index.html
<!DOCTYPE html>
<html lang="fa-IR">
<head>
<meta charset="utf-8">
<title>IRMedia</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js" /></script>
<script>
jQuery(document).ready(function($) {
var scrollHandle = 0,
scrollStep = 5,
parent = $(".tabs-menu-container");
//Start the scrolling process
$(".tabs-arrow").mouseenter(function() {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".tabs-arrow").on("mouseleave", function() {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function() {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
if(newOffset == 0)
$(".tabs-arrow.right").hide();
else
$(".tabs-arrow.right").show();
if(get_width() - 325 + newOffset < 0){
$(".tabs-arrow.left").hide();
return false;
}
else
$(".tabs-arrow.left").show();
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
function get_width(){
var Scroll_width = 0;
$('.tabs-movie-menu').each(function(){
var t = $(this);
$('li', t).each(function(){
Scroll_width += $(this).outerWidth(true);
});
});
return Scroll_width;
}
});
</script>
</head>
<body>
<div class="tab-menu-scroller">
<div class="tabs-menu-container">
<ul class="tabs-movie-menu">
<li class="current"><a href="#tab-1">فصل اول</a></li>
<li><a href="#tab-2">فصل دوم</a></li>
<li><a href="#tab-3">فصل سوم</a></li>
<li><a href="#tab-4">فصل چهارم</a></li>
<li><a href="#tab-5">فصل پنجم</a></li>
<li><a href="#tab-6">فصل ششم</a></li>
</ul>
</div>
<div class="tabs-arrow right" data-scroll-modifier='1' style="display:none;"><span class="icon-angle-right"></span></div>
<div class="tabs-arrow left" data-scroll-modifier='-1'><span class="icon-angle-left"></span></div>
</div>
</body>
</html>
Wie kann ich dieses Problem in Google Chrome lösen?