CODEWITHSUNDEEP
jquerygoogle-chromefirefoxscrollhorizontal-scrolling
MahdiY
MahdiY

Reputation: 1306

difference between horizontal scroll in firefox and chrome

i wrote a HTML code that work in Firefox successfully (limited scroll from right to left), but have a Infinite scroll in google chrome.

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>

How can I solve this problem in Google Chrome?

Upvotes: 0

Views: 346

Answers (1)

Gideon Pyzer
Gideon Pyzer

Reputation: 24098

The issue is with the different browser implementation of scrolling when the direction is right-to-left (RTL). See jquery.rtl-scroll-type for more details and a library for normalizing this.

Upvotes: 3

Related Questions