在模板中创建一个div可滚动

时间：2017-01-28 23:01:28

标签： javascript jquery html css templates

我找到了一个模板，我想用于我自己的私人项目，但有些东西不见了......

有一个div我可以添加内容。好的......一切都很好。但是如果我添加更多内容虽然没有足够的空间呢？对...孔网站是可滚动的....但我不希望孔网站是可滚动的。只有div应该是可滚动的......

我尝试了很多东西......让身体部位固定（位置：固定;）但这会破坏模板的布局。

我试图拒绝div可滚动但没有任何反应......（比如How to make a DIV scrollable instead of BODY?}

那是洞模板：

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!--–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 jquery.mb.components                                                                                                                              –
                                                                                                                                                   –
 file: demo.html                                                                                                                                   –
 last modified: 09/07/14 23.11                                                                                                                     –
                                                                                                                                                   –
 Open Lab s.r.l., Florence - Italy                                                                                                                 –
                                                                                                                                                   –
 email: matteo@open-lab.com                                                                                                                        –
 site: http://pupunzi.com                                                                                                                          –
       http://open-lab.com                                                                                                                         –
 blog: http://pupunzi.open-lab.com                                                                                                                 –
 Q&A:  http://jquery.pupunzi.com                                                                                                                   –
                                                                                                                                                   –
 Licences: MIT, GPL                                                                                                                                –
    http://www.opensource.org/licenses/mit-license.php                                                                                             –
    http://www.gnu.org/licenses/gpl.html                                                                                                           –
                                                                                                                                                   –
 Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);                                                                                               –
 –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––-->

<title>youtube Chromeless Player - mb.YTPlayer</title>

<link href='http://fonts.googleapis.com/css?family=Lekton|Lobster' rel='stylesheet' type='text/css'>
<link href="jquery.mb.YTPlayer-3.0.10/dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.mb.YTPlayer-3.0.10/dist/jquery.mb.YTPlayer.min.js"></script>
    <script src="assets/apikey.js"></script>
<style>
*:focus{
    outline: none;
}

body {
    border: none;
    margin: 0;
    padding: 30px;
    background: #222c2f;
    font: normal 16px/20px Lekton, sans-serif;
}

input, textarea, select, button {
    font-family: "helvetica neue", sans-serif !important;
}

h1{
    text-align: center;
    font-size: 50px;
    font-family: 'Lobster', cursive;
}

h2{
    font-family: "Open Sans", sans-serif;
    font-size: 35px;
    text-align: left;
    line-height: 60px;
}

h1, h2{
    font-family: 'Lobster', cursive;
    text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.30);
    color: #000000;
    font-weight: 200;
}

#wrapper{
    position: relative;
    min-width: 1280px;
}

.console{
    margin-top: 70px;
    text-align: center;
}

#debug {
    position: absolute;
    width: 450px;
    padding: 5px;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    overflow: auto;
    color: #fff;
    font-size: 13px;
    z-index: 10000;
}

.dida{
    color: #fff;
    font-size: 20px;
    margin-top: 20px;
}

button, .button {
    transition: all .4s;
    display: inline-block;
    padding: 0px 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    background-color: rgba(248, 248, 248, 0.4);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    color:#000;

    border: 1px solid transparent;

    text-decoration: none;
    line-height: 30px;
    margin: 3px;
    border-radius: 10px;
}

button:hover, .button:hover {
    background-color: rgb(0, 0, 0);
    color: #FFF;
}

#togglePlay{
    margin-top: 20px;
    font-size: 20px;
    width: 100px;
    height: 100px;
    line-height: 70px;
    border-radius: 100%;
}

#togglePlay.pause{
    background-color: rgb(0, 0, 0);
    color: #fff;
}

#togglePlay.pause:hover{
    background-color: #fff;
    color: #333;
}

#togglePlay.play{
    background-color: #fff;
    color: #333;
}

#togglePlay.play:hover{
    background-color: rgb(0, 0, 0);
    color: #fff;
}

.goto {
    position: absolute;
    left:0;
    top: 360px;
    right: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 50px;
}


.goto .button{
    font-size: 30px;
    font-family: 'Lobster', cursive;
    padding: 10px;
    text-transform: none;
}


#filtersControl{
    position: absolute;
    top:0;
    left: 10px;
    width: 350px;
    margin: 30px auto;
    z-index: 1000;
    display:none;
}

#changeVideo {
    position: absolute;
    top: 0;
    right: 10px;
    width: 350px;
    margin: 30px auto;
    z-index: 100;
    padding: 10px;
    /*background-color: rgba(25, 34, 37, 0.35);*/
    border-radius: 10px;
    color: #FFFFFF;
    box-sizing: border-box;
}

#changeVideo label {
    padding: 10px;
    display: block;
}

#changeVideo input {
    padding: 10px;
    display: block;
    width: 250px;
    border-radius: 10px;
    border: none;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    background-color: rgba(168, 168, 168, 0.20);
}

#changeVideo input[type=number] {
    display: inline-block;
    width: 100px;
}
#changeVideo input[type=checkbox] {
    display: inline-block;
    width: 20px;
}

#loadBox{
    background-color: rgba(168, 168, 168, 0.20);
    border-radius: 10px;
    padding: 20px;
    display:none;
}

/*Slider START ************************************************/

#filterScript {
    margin-top: 20px;
    padding: 10px;
    background-color: rgba(25, 34, 37, 0.35);
    color: #fff;
    border-radius: 10px;
}

.slider {
    position: relative;
    width: 100%;
    height: 25px;
    border: 0 solid transparent;
    background-color: rgba(255, 255, 255, 0.20);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}

.slider:hover {
    background-color: rgba(255, 255, 255, 0.46);
}

.slider .level {
    background-color: rgba(255, 255, 255, 0.80);
    height: 100%;
    border-right: 5px solid rgba(168, 168, 168, 0.60);
}

.slider .desc {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
    font-size: 12px;
    line-height: 18px;
    color: #222222;
}

.slider span {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    /*text-transform: uppercase;*/
    position: absolute;
    top: 0;
    font-size: 12px;
    line-height: 18px;
    color: #222222;
    padding: 4px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
/*Slider END ************************************************/
    a:link{
        color: cadetblue;
        text-decoration: underline;
    }
    a:visited{
      color: IndianRed;
        text-decoration: underline;
    }
    a:hover, a:active {
        color: Chocolate;
        text-decoration: none;
    }
</style>

<script>

    var myPlayer;
    jQuery(function () {

        /*var isIframe=function(){var a=!1;try{self.location.href!=top.location.href&&(a=!0)}catch(b){a=!0}return a};if(!isIframe()){var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");$("#wrapper").prepend(logo),$("#logo").fadeIn()}*/

        jQuery.mbYTPlayer.controls.mute="A";
        jQuery.mbYTPlayer.controls.unmute="M";
        myPlayer = jQuery("#bgndVideo").YTPlayer({align:"center,left"});
//        myPlayer = jQuery("#bgndVideo").YTPlayer();

        myPlayer.YTPApplyFilters({
            grayscale: 50,
            sepia: 83,
            opacity: 29
        });

        /* DEBUG ******************************************************************************************/

        var YTPConsole = jQuery("#eventListener");
        // EVENT: YTPStart YTPEnd YTPLoop YTPPause YTPBuffering
        myPlayer.on("YTPReady YTPStart YTPEnd YTPPlay YTPLoop YTPPause YTPBuffering YTPMuted YTPUnmuted YTPChangeMovie", function (e) {
            YTPConsole.append("event: " + e.type + " (" + jQuery("#bgndVideo").YTPGetPlayer().getPlayerState() + ") > time: " + e.time);
            YTPConsole.append("<br>");
        });

        // EVENT: YTPChanged
        myPlayer.on("YTPChanged", function (e) {
            YTPConsole.html("");
        });

        myPlayer.on("YTPChangeMovie", function(e){
            // console.debug("videoId :: ", e.videoId);
        });

        // EVENT: YTPData
        myPlayer.on("YTPData", function (e) {

            $(".dida").html(e.prop.title + "<br>@" + e.prop.channelTitle);
            $("#videoData").show();

            YTPConsole.append("******************************");
            YTPConsole.append("<br>");
            YTPConsole.append(e.type);
            YTPConsole.append("<br>");
            YTPConsole.append(e.prop.title);
            YTPConsole.append("<br>");
            YTPConsole.append(e.prop.description.replace(/\n/g, "<br/>"));
            YTPConsole.append("<br>");
            YTPConsole.append("******************************");
            YTPConsole.append("<br>");

        });

        // EVENT: YTPTime
        myPlayer.on("YTPTime", function (e) {
            var currentTime = e.time;
            var traceLog = currentTime / 5 == Math.floor(currentTime / 5);

            if (traceLog && YTPConsole.is(":visible")) {
                YTPConsole.append(myPlayer.attr("id")+ " > " + e.type + " > actual time is: " + currentTime);
                YTPConsole.append("<br>");

                if(myPlayer.YTPGetFilters())
                    console.debug("filters: ", myPlayer.YTPGetFilters());

            }
        });

        /* END DEBUG ******************************************************************************************/

        /* FILTER SLIDERS ******************************************************************************************/
        // create sliders for filters adjustment
        $(".slider").each(function(){
            var $slider = $(this);
            $slider.simpleSlider({
                initialval: 0, //function (el) {return Math.random() * el.opt.scale},
                scale     : 100,
                callback  : function (el) {
                    var filter = $(el).data("filter");
                    myPlayer.YTPApplyFilter(filter, +(el.value).toFixed(0));

                    $("span",el).html(filter + "       (" + (+(el.value).toFixed(0)) + ")");

                    var applFilters = [];
                    var desc = "$(selector).YTPApplyFilters({";

                    for (var x=0; x < $(".slider").length; x++ ){
                        var slider = $(".slider").eq(x).get(0);
                        var $slaider = $(slider);

                        if(slider.value)
                            applFilters.push($slaider.data("filter") + ": " + (+(slider.value).toFixed(0)) );
                    };

                    for (var y in applFilters){
                        var comma = y < applFilters.length-1 ? "," : "<br>";
                        desc += "<br> &nbsp;&nbsp;&nbsp;" + applFilters[y] + comma;
                    }

                    desc += "})";

                    $("#filterScript").html(desc);
                }
            });
        });
        //update applied filters
        myPlayer.on("YTPFiltersApplied", function(){
            var filters = myPlayer.get(0).filters;
            for (var key in filters){
                $(".slider[data-filter="+key+"]").updateSliderVal(filters[key].value);
            }
        });
        /* END FILTER SLIDERS ******************************************************************************************/

    });

    /**
     *
     * @param state
     */
    function changeLabel(state){
        $("#togglePlay").html(state != 1 ? "pause" : "play");

        $("#togglePlay").removeClass(state != 1 ? "play" : "pause");
        $("#togglePlay").addClass(state != 1 ? "pause" : "play");
    }

    /**
     *
     * @param val
     * @returns {*|number}
     */
    function checkForVal(val){
        return val || 0;
    }


                jQuery(document).ready(function(){
                    jQuery('.scrollbar-inner').scrollbar();
                });


</script>
</head>
<body>
<div id="wrapper" style="position:relative; padding:10px 0;z-index:10">
    <div class="console">
        <button onclick="jQuery('#bgndVideo').YTPToggleVolume()">mute/unmute</button>
        <button id="debugBtn" class="command" onclick="jQuery('#debug').toggle()"> show/hide the console</button>
    </div>
    <br>
    <br>
    <h1 style="color:white"><a href="http://www.fatalityshooterclan.de/">Fatality Shooterclan</a></h1>
    <h2 style="color:white; text-align: center">Youtube-Music at our<br>TTT-Server</h2>


    <div id="filtersControl">

        <h2 style="color:white">Apply filters</h2>
        <h3 style="color: white">* Filters don't work in IE.</h3>

        <button id="toggleFilters"
                onclick="jQuery('#bgndVideo').YTPToggleFilters(function(a){if(!a) {$('#toggleFilters').html('enable filters')} else {$('#toggleFilters').html('disable filters')}})">
            disable all filters
        </button>
        <script>        
            function rFCallback(f){
                $(".slider[data-filter="+f+"]").updateSliderVal(0);
            }
        </script>
        <button id="removeFilters"
                onclick="jQuery('#bgndVideo').YTPRemoveFilter(rFCallback)">
            remove all filters
        </button>

        <div class="slider"
             data-filter="grayscale"><span>grayscale</span>
        </div>

        <div class="slider"
             data-filter="sepia"><span>sepia</span>
        </div>

        <div class="slider"
             data-filter="hue_rotate"
             data-scale="360"><span>hue rotate</span>
        </div>

        <div class="slider"
             data-filter="invert"><span>invert</span>
        </div>

        <div class="slider"
             data-filter="opacity"><span>opacity</span>
        </div>

        <div class="slider"
             data-filter="saturate"
             data-scale="1000"><span>saturate</span>
        </div>

        <div class="slider"
             data-filter="brightness"
             data-scale="200"><span>brightness</span>
        </div>

        <div class="slider"
             data-filter="contrast"
             data-scale="500"><span>contrast</span>
        </div>

        <div class="slider"
             data-filter="blur"
             data-scale="50"><span>blur</span>
        </div>

        <div id="filterScript"></div>

    </div>

    <div id="changeVideo">
        <h2 style="color:white">Change video</h2>
        <div id="ScrollableContent">
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '7SnmCUwOsts', mute:false, addRaster:false})">Nightwish - Élan</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: '4w_58CQWHFQ', mute:false, addRaster:false})">Avantasia - Mystery Of A Blood Red Rose</button>
        <button class="command" onclick="jQuery('#bgndVideo').YTPChangeMovie({videoURL: 'nTEbu0YSuDU', mute:false, addRaster:false})">Letzte Instanz - Weiß wie der Schnee (2016)</button>
        <br>
        <br>
        <div id="loadBox">
            <label for="videoID">Or insert here the ID or the complete URL of the Youtube video:</label>
            <input id="videoID" type="text" value="r1xohS2u69E" onfocus="$('#loadOptions').slideDown()">

            <div id="loadOptions" style="display: none">
                <br>
                <input id="startAt" type="number" placeholder="starts at">
                <input id="stopAt" type="number" placeholder="stops at">
                <br>
                <br>
                <input id="audioOff" type="checkbox" checked> Audio is OFF
                <br>
            </div>
            <br>
            <button onclick="$('#loadOptions').slideUp(); jQuery('#bgndVideo').YTPChangeMovie({videoURL: $('#videoID').val(), startAt: checkForVal($('#startAt').val()), stopAt: checkForVal($('#stopAt').val()), mute: $('#audioOff').is(':checked') })">change video</button>

            <div id="videoData" style="display: none">
                <h2 style="color: #FFFFFF; text-align: left">Current video:</h2>
                <div class="dida"></div>
            </div>
            <br>
            <button onclick="jQuery.mbYTPlayer.removeStoredData()"> Remove stored data </button>
        </div>
    </div>
    </div>

    <div class="goto">
        <button id="togglePlay" class="command pause" onclick="jQuery('#bgndVideo').YTPTogglePlay(changeLabel)">play</button>
    </div>



    <!--7SnmCUwOsts--><!--BsekcY04xvQ--><!--r1xohS2u69E--><!--Fk9EBOOAYiU--><!--sEuXfDtrco8--><!--9d8wWcJLnFI-->
    <div id="bgndVideo" class="player" data-property="{videoURL:'zPonioDYnoY',containment:'body', showControls:true, autoPlay:true, loop:false, vol:50, mute:false, startAt:0,  stopAt:0, opacity:1, addRaster:true, quality:'large', optimizeDisplay:true, stopMovieOnBlur:false}">My video</div>

</div>

<div id="debug" style="display: none">
    <h2 style="color: #FFFFFF; text-align: left">Events console: </h2>
    <div id="eventListener"></div>
</div>
</body>
</html>

我想要滚动的div是“”，这里是现在的截图...

ScreenshotItLooksLikeNow

我希望有人能帮我解决问题...

2 个答案:

答案 0 :(得分：1)

设置DIV高度和宽度。然后只需将溢出设置为滚动！

div{
overflow: scroll;
width: 500px;
height: 500px;
}

答案 1 :(得分：0)

将此添加到您的CSS 

#ScrollableContent {
  overflow: scroll;
}
相关问题
最新问题