Question

我正在使用Tiny Scrollbar Plugin制作一个微小的水平滚动条，在Media Queries的帮助下，在一个非破坏单一的div中显示一堆图像，缩小的窗口大小为768像素。当我运行上面的代码并将窗口大小减小到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>

Answer 1

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

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

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

但是，支持你的代码，尝试在窗口调整大小时重新加载tinyscrollbar。如果宽度因媒体查询而改变，则必须使用。

$(window).resize(function() {
   // reload your tinnyscrollbar again
});

如何创建一个微小的水平滚动条来逐个显示内嵌图像？

1 个答案: