0

我在一个页面上有自定义滚动条，我设法开始工作。出于某种原因，我无法在不同的页面上得到同样的东西。页面之间的唯一区别是它们的内容。在工作页面上，我嵌入了 YouTube 视频，在另一个页面上，我嵌入了 Soundcloud 音频。出于某种原因，我只能看到位于屏幕错误一侧的滚动条的拇指。我是这个网站的新手，所以如果我可能会有点不耐烦，我会提前道歉。谢谢你。

工作页面 HTML： 

 <!DOCTYPE html>
<html lang="en-US">
    <head>
    <meta charset="utf8" />
        <link rel="stylesheet" type="text/css" media="all" href="css/mainstyle.css"/>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#scrollbar1').tinyscrollbar();   
        });
    </script>   
            <meta name="viewport" content="initial-scale=1" />

    </head>
    <body>
    <div id="background">
        <div id="wrapper">

        <div class="navigation">
            <ul id="mainmenu">
                <li><a href="index.html">Home</a></li>  
                <li><a href="band.html">Band</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="shows.html">Shows</a></li>
                <li><a href="music.html">Music</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li class="active"><a href="media.html">Media</a></li>
                <li><a href="store.html">Store</a></li>                         
            </ul>
        </div>

        <div class="article">

            <div class="mediacontainer">
            <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">

                    <iframe width="853" height="480" src="https://www.youtube.com/embed/3LsB125vBWw" frameborder="0" allowfullscreen></iframe>
                    <iframe width="853" height="480" src="https://www.youtube.com/embed/0LUYdvWQ_uI" frameborder="0" allowfullscreen></iframe>
                    <iframe width="853" height="480" src="https://www.youtube.com/embed/PHI63zlRA0s?list=UUYgrxNCR_m-Vmsk5M2q3U7Q" frameborder="0" allowfullscreen></iframe>
                    <iframe width="853" height="480" src="https://www.youtube.com/embed/5UFCRnTYoWI?list=UUYgrxNCR_m-Vmsk5M2q3U7Q" frameborder="0" allowfullscreen></iframe>

            </div>
            </div>
            </div>
            </div>
        </div>



            <div class="footer">



                    <ul id="footermenu">
                        <li><a href="hello.html">Terms of use</a></li>
                        <li><a href="hello.html">Privacy Policy</a></li>
                        <li><a href="hello.html">Contact</a></li>
                   </ul>

            </div>


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

CSS：

 .mediacontainer {
    margin-left: -250px;
    }
.musiccontainer {
    margin-left: -10px;
    }
#scrollbar1 { margin-left: 300px; }
#scrollbar1 .viewport { height: 800px; overflow: hidden; position: relative; padding-left:0;  }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: /*transparent url(../imagesscroll/bg-scrollbar-track-y.png)*/no-repeat 0 0;background-color: rgba(55, 55, 55, 0.7); position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: /*transparent url(../imagesscroll/bg-scrollbar-trackend-y.png)*/ no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { background: transparent url(../imagesscroll/scrollbarthumb.png) no-repeat 50% 50%; height: 20px; left:-5px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end {no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; display:none; }
#scrollbar1 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

页面 HTML 无效：

<!DOCTYPE html>
<html lang="en-US">
    <head>
    <meta charset="utf8" />
        <link rel="stylesheet" type="text/css" media="all" href="css/mainstyle.css"/>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#scrollbar1').tinyscrollbar();   
        });
    </script>
            <meta name="viewport" content="initial-scale=1" />

    </head>
    <body>
    <div id="background">
        <div id="wrapper">

        <div class="navigation">
            <ul id="mainmenu">
                <li><a href="index.html">Home</a></li>  
                <li><a href="band.html">Band</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="shows.html">Shows</a></li>
                <li class="active"><a href="music.html">Music</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="media.html">Media</a></li>
                <li><a href="store.html">Store</a></li>                         
            </ul>
        </div>
        <div class="article">
            <div class="musiccontainer">
            <div id="musicscrollbar1">
            <div class="musicscrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
            <div class="musicviewport">
            <div class="musicoverview">

            <iframe width="960" height="166" style="overflow:hidden; border:none;"  src=                "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38657166&amp;color=ee780a&amp;auto_play=false&amp;show_artwork=true"></iframe>
            <iframe width="960" height="166" style="overflow:hidden; border:none;"  src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F31700420&amp;color=ee780a&amp;auto_play=false&amp;show_artwork=true"></iframe>
            <iframe width="960" height="166" style="overflow:hidden; border:none;"  src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30789244&amp;color=ee780a&amp;auto_play=false&amp;show_artwork=true"></iframe>
            <iframe width="960" height="166" style="overflow:hidden; border:none;"  src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F27683416&amp;color=ee780a&amp;auto_play=false&amp;show_artwork=true"></iframe>
            <iframe width="960" height="166" style="overflow:hidden; border:none;" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F10400567&amp;color=ee780a&amp;auto_play=false&amp;show_artwork=true"></iframe>
            <iframe width="960" height="450" style="overflow:hidden; border:none;" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1286812&amp;color=ee780a&amp;auto_play=false&amp;show_artwork=true"></iframe>

            </div>
            </div>
            </div>
            </div>


        </div>


            <div class="footer">


                    <ul id="footermenu">
                        <li><a href="hello.html">Terms of use</a></li>
                        <li><a href="hello.html">Privacy Policy</a></li>
                        <li><a href="hello.html">Contact</a></li>
                   </ul>



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

Javascript：

(function(a){a.tiny=a.tiny||{};a.tiny.scrollbar={options:{axis:"y",wheel:40,scroll:true,lockscroll:true,size:"auto",sizethumb:"auto",invertscroll:false}};a.fn.tinyscrollbar=function(d){var c=a.extend({},a.tiny.scrollbar.options,d);this.each(function(){a(this).data("tsb",new b(a(this),c))});return this};a.fn.tinyscrollbar_update=function(c){return a(this).data("tsb").update(c)};function b(q,g){var k=this,t=q,j={obj:a(".viewport",q)},h={obj:a(".overview",q)},d={obj:a(".scrollbar",q)},m={obj:a(".track",d.obj)},p={obj:a(".thumb",d.obj)},l=g.axis==="x",n=l?"left":"top",v=l?"Width":"Height",r=0,y={start:0,now:0},o={},e="ontouchstart" in document.documentElement;function c(){k.update();s();return k}this.update=function(z){j[g.axis]=j.obj[0]["offset"+v];h[g.axis]=h.obj[0]["scroll"+v];h.ratio=j[g.axis]/h[g.axis];d.obj.toggleClass("disable",h.ratio>=1);m[g.axis]=g.size==="auto"?j[g.axis]:g.size;p[g.axis]=Math.min(m[g.axis],Math.max(0,(g.sizethumb==="auto"?(m[g.axis]*h.ratio):g.sizethumb)));d.ratio=g.sizethumb==="auto"?(h[g.axis]/m[g.axis]):(h[g.axis]-j[g.axis])/(m[g.axis]-p[g.axis]);r=(z==="relative"&&h.ratio<=1)?Math.min((h[g.axis]-j[g.axis]),Math.max(0,r)):0;r=(z==="bottom"&&h.ratio<=1)?(h[g.axis]-j[g.axis]):isNaN(parseInt(z,10))?r:parseInt(z,10);w()};function w(){var z=v.toLowerCase();p.obj.css(n,r/d.ratio);h.obj.css(n,-r);o.start=p.obj.offset()[n];d.obj.css(z,m[g.axis]);m.obj.css(z,m[g.axis]);p.obj.css(z,p[g.axis])}function s(){if(!e){p.obj.bind("mousedown",i);m.obj.bind("mouseup",u)}else{j.obj[0].ontouchstart=function(z){if(1===z.touches.length){i(z.touches[0]);z.stopPropagation()}}}if(g.scroll&&window.addEventListener){t[0].addEventListener("DOMMouseScroll",x,false);t[0].addEventListener("mousewheel",x,false)}else{if(g.scroll){t[0].onmousewheel=x}}}function i(A){a("body").addClass("noSelect");var z=parseInt(p.obj.css(n),10);o.start=l?A.pageX:A.pageY;y.start=z=="auto"?0:z;if(!e){a(document).bind("mousemove",u);a(document).bind("mouseup",f);p.obj.bind("mouseup",f)}else{document.ontouchmove=function(B){B.preventDefault();u(B.touches[0])};document.ontouchend=f}}function x(B){if(h.ratio<1){var A=B||window.event,z=A.wheelDelta?A.wheelDelta/120:-A.detail/3;r-=z*g.wheel;r=Math.min((h[g.axis]-j[g.axis]),Math.max(0,r));p.obj.css(n,r/d.ratio);h.obj.css(n,-r);if(g.lockscroll||(r!==(h[g.axis]-j[g.axis])&&r!==0)){A=a.event.fix(A);A.preventDefault()}}}function u(z){if(h.ratio<1){if(g.invertscroll&&e){y.now=Math.min((m[g.axis]-p[g.axis]),Math.max(0,(y.start+(o.start-(l?z.pageX:z.pageY)))))}else{y.now=Math.min((m[g.axis]-p[g.axis]),Math.max(0,(y.start+((l?z.pageX:z.pageY)-o.start))))}r=y.now*d.ratio;h.obj.css(n,-r);p.obj.css(n,y.now)}}function f(){a("body").removeClass("noSelect");a(document).unbind("mousemove",u);a(document).unbind("mouseup",f);p.obj.unbind("mouseup",f);document.ontouchmove=document.ontouchend=null}return c()}}(jQuery));
4

1 回答 1

0

在第二个 HTML 中，您有$('#scrollbar1').tinyscrollbar();，但看起来您将 div 重命名为 musicscrollbar1。这很可能是问题所在。所以只需将行更改为$('#musicscrollbar1').tinyscrollbar();

于 2013-01-11T05:26:29.263 回答