0

我正在使用Tiny Scrollbar Plugin制作一个微小的水平滚动条，在Media Queries的帮助下，在 768 px 的缩小窗口大小的非中断单个中显示 div 内的一堆图像。当我运行上面的代码并将窗口大小减小到 768 像素时，我的图像显示在一行中，但不幸的是我没有任何水平滚动条来滚动图像。我不知道我在哪里做错了。谁能告诉如何获得一个微小的水平滚动条

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tinyscrollbar.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#scrollbar1').tinyscrollbar({ axis: 'y' });
        });
    </script>
    <style>
        .overview
        {
            white-space: nowrap;
        }
        #scrollbar1
        {
            width: 100%;
            margin: 20px 0 10px;
        }
        #scrollbar1 .viewport
        {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        #scrollbar1 .overview
        {
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            padding: 0;
            margin: 0;
            width: 100%;
        }
        #scrollbar1 .scrollbar
        {
            position: relative;
            background-position: 0 0;
            float: right;
            width: 15px;
        }
        #scrollbar1 .track
        {
            background: height: 100%;
            width: 15px;
            position: relative;
        }
        #scrollbar1 .thumb
        {
            background-color: #e0d8b8;
            border-radius: 4px;
            height: 20px;
            width: 8px;
            cursor: pointer;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: -5px;
        }
        #scrollbar1 .thumb .end
        {
            background-color: #e0d8b8;
            border-radius: 4px;
            overflow: hidden;
            height: 20px;
            width: 8px;
        }
        #scrollbar1 .disable
        {
            display: none;
        }


        @media screen and (max-width: 768px)
        {
            .overview 
            {
                white-space: nowrap;
                display: inline;
            }
        }

    </style>
</head>
<body>    
    <div id="scrollbar1">
        <div class="scrollbar">
            <div class="track">
                <div class="thumb">
                    <div class="end">
                    </div>
                </div>
            </div>
        </div>
        <div class="viewport">
            <div class="overview">
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
            </div>
        </div>
    </div>    
</body>
</html>
4

1 回答 1

0

如果您不介意，我建议切换到 bxslider。

这是一个简单的例子。（忽略图像周围的白色边框）。您应该查看选项页面，此滑块是高度可配置的。

对您来说唯一的缺点是缺少水平滚动条。但是滑块是完全响应的，所以不需要编写媒体查询等。

但是，回到您的代码，尝试在调整窗口大小时重新加载 tinyscrollbar。如果宽度因为媒体查询而改变，这是必须的。

$(window).resize(function() {
   // reload your tinnyscrollbar again
});
于 2014-02-01T21:44:28.320 回答