Results 1 to 8 of 8

Thread: Iframe without scrollbar.

  1. #1
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Iframe without scrollbar.

    I have iframe in my page. How can i make iframe without scrollbar, but i can
    scroll iframe content with mousewheel? How can i do that?

    Waiting for answers.

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    In your iframe CSS:

    Code:
    body {
    overflow: hidden;
    }
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    You need to remember one thing before you make the scrollbars of your iframe hidden. The overflow property works along with the height and width of the your iframe element.

    For example if you have a iframe whose width is 900px and height is 800px then the iframe will display the its content based on that dimensions the data that comes beyond the dimension will not be displayed.

    If you are looking for disabling either horizontal or vertical scrollbar then you can use overflow-x or overflow-y properties.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    The style overflow:hidden works differently in different browsers. Some will still allow you to scroll the area (with mousewheel or keyboard) if there is additional unseen content, others will simply not display it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    After a bit of checking, overflow:hidden (applied to the iframe) seems to only work to remove scroll bars in some browsers. The attribute scrolling="no" is a better choice. However, once you get rid of the scrollbars, most browsers will not allow you to scroll the iframe using the mouse wheel. IE will not allow it at all, FF allows it using the arrow keys, Opera allows it using the keys or wheel.

    Using overflow:hidden on the body of the page inside the iframe only gets rid of the horizontal scroll bar in IE. Horizontal scrolling cannot be done in that browser. It gets rid of both scroll bars in Opera and FF, and the ability to scroll is the same in those browsers as in the above paragraph.

    Using just HTML, I don't believe there is any way to have "iframe without scrollbar, but i can scroll iframe content with mousewheel".

    I'm not even too confident that it can be done using javascript.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    There's always Flash
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    After a bit of Googling, I found this script:

    http://adomas.org/javascript-mouse-wheel/

    With just a bit of modification (red):

    Code:
    <script type="text/javascript">
    /** This is high-level function.
     * It must react to delta being more/less than zero.
     */
    function handle(delta) {
    var d=delta*-10;
    window.scrollBy(0,d);
    }
    
    /** Event handler for mouse wheel event.
     */
    function wheel(event){
            var delta = 0;
            if (!event) /* For IE. */
                    event = window.event;
            if (event.wheelDelta) { /* IE/Opera. */
                    delta = event.wheelDelta/120;
                    /** In Opera 9, delta differs in sign as compared to IE.
                     */
                    if (window.opera)
                            delta = -delta;
            } else if (event.detail) { /** Mozilla case. */
                    /** In Mozilla, sign of delta is different than in IE.
                     * Also, delta is multiple of 3.
                     */
                    delta = -event.detail/3;
            }
            /** If delta is nonzero, handle it.
             * Basically, delta is now positive if wheel was scrolled up,
             * and negative, if wheel was scrolled down.
             */
            if (delta)
                    handle(delta);
            /** Prevent default actions caused by mouse wheel.
             * That might be ugly, but we handle scrolls somehow
             * anyway, so don't bother here..
             */
            if (event.preventDefault)
                    event.preventDefault();
    	event.returnValue = false;
    }
    
    /** Initialization code. 
     * If you use your own event management code, change it as required.
     */
    if (window.addEventListener)
            /** DOMMouseScroll is for mozilla. */
            window.addEventListener('DOMMouseScroll', wheel, false);
    /** IE/Opera. */
    window.onmousewheel = document.onmousewheel = wheel;
    </script>
    and placed in the head of the page in the iframe, will do the trick.

    No style is required on either page, to eliminate the scroll bars on the iframe, set its scrolling attribute to no:

    Code:
    <iframe src="big_page.htm" width="300" height="300" scrolling="no" frameborder="1"></iframe>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    and placed in the head of the page in the iframe, will do the trick.
    Is there a way to do this if the page in the iFrame is not my own?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •