Disable scrolling in Posts - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
March 8, 2018 at 9:55 am #923683
wtechgr
Participant
Hello Team,

I hope you are doing well.

We want to create posts in a website, with custom layouts where the visitor will be guided with anchors from one color section to another.

In order to reduce visitor’s possibility of getting lost, we would like to disable scrolling inside every post.

As a temporary solution, we use a page/post specific css plugin CSS Plus, with the following code:
```
html, body {
     overflow: hidden;
}
```
It works for the posts, but the scrolling gets disabled also in the blog page, as well as the search results page.

Can you please suggest a way to disable scrolling, for posts only, without affecting the other parts of the website?

Best regards!
March 8, 2018 at 11:15 am #923743
Victoria
Inactive Moderator
Hey wtechgr,

The selector should be more specific, something like
```
.post-template-default.single.single-post
```
If you need further assistance please let us know.
Best regards,
Victoria
March 8, 2018 at 11:33 am #923769
wtechgr
Participant
Hey there Victoria,

Thank you for the quick reply. I’ve tried to use this form:
```
.post-template-default.single.single-post{
    overflow: hidden;
}
```
but it does not seem to have an effect to scrolling.

I have tried with the word “html” at the start of the code, but it had an effect in the whole website.

Can you please advise how should the code look like, to have the correct effect?

Thank you in advance!

Best regards!
- This reply was modified 6 years, 8 months ago by wtechgr.
March 8, 2018 at 11:48 am #923786

Victoria
Inactive Moderator

Hi,

Well, I’m not sure I am totally clear on what you’re trying to achieve. Do you have an example site maybe?

Best regards,
Victoria

March 8, 2018 at 1:29 pm #923862
wtechgr
Participant
Hello again!

Thanks for coming back!

We have created many posts on a new project that we do not have online yet, unfortunately (I’ve created a simple example – please see lower on this reply).

For the posts, we have used the Advanced Layout Editor.

Using the Advanced Layout Editor, we have created several Color sections in every post.

Every color section contains buttons that redirect (using anchors) to other color sections inside the same post.

What I want to achieve, is for the visitor to be able to navigate inside the post using only the buttons, without being able to scroll with their mouse (to make the scroll bar at the right side of the browser disappear). Our issue is that the initial CSS we were using, (the code mentioned at the initial thread of this discussion), has an effect on other parts of the website too, and we fail to make it work only for blog posts.

—> I just went ahead and created a very simple post at https://www.wtech.gr/testpost/ to see what we want to achive.

So as you can see there are 2 color sections with buttons that lead from one to the other. One can either click the buttons or scroll with the mouse. We want the most efficient way to disable scrolling with mouse, so that visitors can navigate from one color section to the other, only using the buttons offered, but also that this has an effect only to blog posts and not other parts of the website!

I have came up with this code now for the theme’s quick css,
```
html.html_entry_id_1444{
     overflow: hidden;
}
```
but for every single post, I have to create a new line.

—> The main question is, instead of specifying every post, is there a code to perform the above, but for all blog posts?

Thanks again in advance, and sorry for the long post.

Best regards!
March 8, 2018 at 2:13 pm #923878
Mike
Moderator
Hi,
Try adding this code to the end of your functions.php file in Appearance > Editor:
```
add_action('wp_footer', 'no_post_scroll');

function no_post_scroll() {
	 if ( is_single()) {
  echo '<style>
    html, body {
     overflow: hidden;
}
  </style>';
}
}
```
this will check that it is a single post page, and apply the css.

Best regards,
Mike
March 8, 2018 at 2:23 pm #923885

wtechgr
Participant

Hey there Mike,

Issue is now resolved! Thank you so much, once again, for the amazing support!

Best regards!

March 8, 2018 at 9:19 pm #924082

Basilis
Inactive Moderator

Hi,

Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Basilis
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Disable scrolling in Posts’ is closed to new replies.