0

I have a particular page where navigation is done just by clicking.

For this purpose I have set the following css:

body{
    overflow:hidden;
}

Now, to navigate to a particular section of my page the link must be visible, otherwise I'm stuck at that position. This requires that a certain portion of my page should be "scrollable".

In the following fiddle I'm stuck at "Div3": Fiddle

How do I make my page "scrollable" when it is displaying "Div3", otherwise not.

EDIT:

I can't use overflow-y: scroll; for my "Div3" since it covers the full width of my page. Adding that shifts the contents of "Div3" which I do not want.

Nikunj Madhogaria
  • 2,139
  • 2
  • 23
  • 40
  • maybe I'll have a look at the inview-fiddle later and if I have it working for diff screensizes taking in account the mentioned issue in above comment undelete my answer. Just wanted to share a thought and should have posted it as comment instead of an answer as it's not finished. – matthias_h Sep 20 '14 at 22:11
  • would definitely upvote your's if you come up with a solution :) – Nikunj Madhogaria Sep 20 '14 at 22:13
  • what's the reason behind that downvote? Isn't that a valid question? :o – Nikunj Madhogaria Sep 20 '14 at 22:15
  • one small question: what should happen when the links on div1 are not visible, scrolling is allowed and div2 comes into view? should this be avoided, like as soon as the navigation on div1 is inview, overflow is hidden again (scrolling not allowed), so that div2 is only reachable with the navigation? – matthias_h Sep 20 '14 at 22:37
  • whenever the screen shows any div apart from "Div3", the scroll should be hidden :) – Nikunj Madhogaria Sep 20 '14 at 22:39
  • I think I need the tech used in this website: http://www.fontwalk.de/03/ – Nikunj Madhogaria Sep 20 '14 at 22:41
  • on the fontwalk-site I have a scrollbar all the time, you don't? – matthias_h Sep 20 '14 at 22:43
  • what I meant was that it seems that the website was somehow able to track the exact scroll position, not after the scroll is completed, just like jquery ui spinner! If I had a hidden jquery ui spinner that fits my entire window, it might be possible to solve this situation. – Nikunj Madhogaria Sep 21 '14 at 05:32

3 Answers3

1

Just make #div3 scrollable by adding an extra container around its content, like this:

<div id="div3">
    <div class="content">
        <h3>Div 3</h3>
        <a href="#div4">Next</a>
        <a href="#div2">Prev</a>
    </div>
</div>

Then modify your CSS to force that container to scroll:

#div3 {
    overflow-y: scroll;
}

The updated fiddle shows how this works in practice.

Edit

If what you really want is to see if #div3 is the only one currently in the viewport AND that the entire viewport is taken up by it, the JS (using jQuery) would look something like this:

var $div3 = $('#div3'),
    div3Top = Math.round($div3.offset().top),
    div3Bottom = $div3.height() + div3Top,
    $window = $(window),
    $body = $('body');

$(window).on('scroll', function() {

    console.log($window.scrollTop());
    console.log(div3Top);    
    console.log(div3Bottom);

    if (($window.scrollTop() >= div3Top) && ($window.scrollTop() + $window.height()) < div3Bottom + 5) {
        $body.css('overflow', 'scroll');
    } else {
        $body.css('overflow', 'hidden');
    }
});

This isn't perfect, but should demonstrate the idea well enough.

Updated fiddle here.

Robert
  • 260
  • 1
  • 7
  • No, I can't change the height of my div3's content. Like I said, I want the page to be scrollable, not the div itself! – Nikunj Madhogaria Sep 20 '14 at 21:43
  • Then your question is a duplicate of http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 – Robert Sep 20 '14 at 21:47
  • would be really helpful if you can demonstrate it on fiddle :) – Nikunj Madhogaria Sep 20 '14 at 21:51
  • Updated answer to hopefully demonstrate something close to what you're looking for. – Robert Sep 20 '14 at 22:04
  • even I tried the same, but what if you voluntarily drag the scroll bar to such an extent that you land up in "div2" or "div4"? I didn't want that. – Nikunj Madhogaria Sep 20 '14 at 22:09
  • This is why my first solution is what you want. If you need to, you can use JS to inject the suggested div and styling, instead of hardcoding it as I originally suggested. As far as I know, there is no way to override the browser's scrollbar behavior in the way you're looking for. – Robert Sep 20 '14 at 22:23
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61609/discussion-between-robert-and-thescorpion). – Robert Sep 20 '14 at 22:26
0

I know this is an ugly solution:

$(window).scroll(function() {
    $('#message').text("Current scroll position: " + $(this).scrollTop());//added to see the scroll position
     var pixels_to_top = $(this).scrollTop();
        var your_value_min = 810;
            var your_value_max = 857;
        if (pixels_to_top > your_value_min && pixels_to_top<your_value_max){
             $("body").css("overflow","auto");
           }
    else{
     $("body").css("overflow","hidden");
    }
});

http://jsfiddle.net/Loy6z2kt/18/

You have to adjust the min and max values to your needs.

Claudiu Creanga
  • 8,031
  • 10
  • 71
  • 110
0

As you just mentioned in your comments below the OP: The effect on the mentioned website http://www.fontwalk.de/03/ that you want to have as result - just in case you don't know - is called parallax scrolling; just check some of the examples here: Parallax examples. If that's what you want, I guess you'd like to check the instructions e.g. given here: Parallax scrolling tutorial. At least as a starting point, because the second tutorial offered there for "advanced parallax" isn't for free.
The scroller used for this tutorial as well as for many websites is the free skrollr.js.

In case that shouldn't be what you're after just update that in your question like you did previously with the overflow-y: scroll.

matthias_h
  • 11,356
  • 9
  • 22
  • 40
  • Never tried that before, so can't really say much about it. It just seems that such websites can get browser's scroll value simultaneously with the scrolling action (i.e. not after scroll action is completed) unlike the normal .scroll() method which gives scroll value after completion of scroll. If somehow I can get the scroll value along with the scrolling action, the task should be done. – Nikunj Madhogaria Sep 21 '14 at 10:52
  • @theScorpion And just in case you're still only after having scrollbar only visible for div3 etc, I've adjusted the fiddle from my previous answer: http://jsfiddle.net/Loy6z2kt/22/ Works for me in the small fiddle window, but for a "real" solution all divs should cover 100% height with the exception of div3; especially because the links are set to absol. px positions (should then be adjusted to bottom 0 in a relative 100% height container). – matthias_h Sep 21 '14 at 11:32