JQuery Scrollable Text | 易学教程

问题

I'm searching for a jquery plugin that will bound text inside a scrollable box. Most of the scroll plugins are converting the browser scroll bar but I want to keep that as it is and usuable. This is just to contain a large amount of text in a small space.

It's like this page where at the very bottom they are containing a large amount of text in a small scrollable box. I tried to implement this plugin but I'm kinda new to JQuery so the meager instructions weren't enough for me to get off my feet. If I can use this plugin to do what I want, is this code right?:

<script>
$(document).ready(function(e) {
    $(".Information").uscrollbar();
});
</script>

<div id="Hotel" class="Information">
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
        <p>blah</p>
    </div>

回答1:

You really don't need jQuery for this. Just some CSS.

.Information{
height:100px;
overflow:auto;
}

If you have a genuine need for this plugin then make sure you're referencing jQuery correctly and the link to the plugin js file.

If you run the page in your browser do you get anything in the console window. Any errors.

EDIT: Added a JSFiddle

EDIT: Also be sure you're referencing the required assets:

jquery.uscrollbar.js
jquery.uscrollbar.css

回答2:

If you need to dynamically do this to elements, just wrap the content in a <div> with a special class:

CSS:

.scroll {
    overflow: auto;
    max-height: 100px;
}

JS:

$(document).ready(function() {
    $('.elements_that_should_scroll').wrap($('<div>', {'class': 'scroll'}));
});

Demo: http://jsfiddle.net/nW7uH/

If not, just give those elements the class scroll and it should work just fine without JS.

回答3:

Make sure you specify a fixed width and height for your container div, in your case, the div with the class Information. Add this to your CSS file.

.Information {
    height: 300px;
    width: 300px;
}

来源：https://stackoverflow.com/questions/12503389/jquery-scrollable-text

标签

jquery

html

jquery-plugins