Before you ask please READ THIS

Removal of browser scroll bars?

Hi

How can I remove scroll bars on pages where there is no need for them?

When I change the following css it works but causes problems in galleries etc:
html.show-scroll body { overflow-y: auto; }

Have a look at the attached screen cap of the scroll bars in question.
scrollbars.jpeg
595 x 846 - 534K

Comments

  • AirAir
    Posts: 10,970
    Hello:-)
    FrancoBar said: When I change the following css it works but causes problems in galleries etc:
    html.show-scroll body { overflow-y: auto; }
    Exactly. This why they are activated everywhere, as theme also can work in AJAX mode, and it is not possible to know if scroll bar are needed or not.

    Different pages have different classes in body element, but this is unfortunately set in html element.

    So there is no solution I could think of, that will be safe always rather then keep them active.

    With kind regards.
  • edited December 2015 Posts: 6
    Ok, found a way to get a different ID tag on each page so I could target unique pages with costume CSS.
    Here is how I did it:

    Edit the Thirteen: Header (header.php) file.

    Add this code after
    <?php
    
    	$page = $_SERVER['REQUEST_URI']; 
    	$page = str_replace('/', '', $page); 
    	$page = str_replace('.php', '', $page); 
    	$page = str_replace('?s=', '', $page); 
    	$page = $page ? $page : 'default'; 
    

    And replace present <body> tag code:
    <body id="top" <?php body_class(); ?>>

    with...

    <body id="<?php echo $page ?>" <?php body_class(); ?>>

    And that's it. Now you have a unique ID code for each page that you can target :-)

    To remove scroll bars from my main index page which is called id="default" I used this in the custome CSS section:
    #default {
    overflow-y: auto;
    }
    Post edited by Air on
  • AirAir
    Posts: 10,970
    I have put your code in formatting:-) However your changes made me realize I was wrong. I was sure that overflow is set on html element, but it is not. It is on body.

    In that case you don't need your modification at all, cause each page already has unique class for each page, like page-id-225. Check body elements classes for this.

    What is more there are even special classes that we have added, that allow you to do it in more general way, as there are many unique classes in body element.

    To disable scroll bars on slider album you can use this custom CSS alone:
    html.show-scroll body.single-album-slider{
    overflow-y: auto;
    }
    If you need it in other places then I can help you get it.

    Sorry for extra work, but thanks for making me realize that!

    With kind regards.
  • Hi Air

    Thanks for taking the time and re-looking at it. But I have tried your way and it does not work 100%.
    Your way causes problems with image spacing in albums. Have a look at the attached image.
    bm.jpg
    1163 x 759 - 152K
  • AirAir
    Posts: 10,970
    I don't think this is caused by switching off scroll bars, as it doesn't make sense. Could you post live link to site where you added this code?

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!