Create a specific part of a webpage that can be scrolled through

Question

Create a specific part of a webpage that can be scrolled through

In a unique way, I have designed a page where the only way to navigate is by simply clicking.

To achieve this, I have implemented the following custom CSS:

body{
    overflow:hidden;
}

However, I have encountered a problem where I am unable to scroll to a specific section of my page if the link is not visible. This requires that a certain part of the page should be scrollable.

In the sample fiddle provided, I am facing this issue with "Div3": Check it out here

Can anyone suggest how to make only the section displaying "Div3" scrollable and not affect the rest of the page?

UPDATE:

Applying overflow-y: scroll; to "Div3" is not an option as it affects the entire width of the page. This causes the contents of "Div3" to shift, which is not the desired outcome.

javascript jquery html css

Answer 1

Answer №1

To enable scrolling for #div3, you can enclose its content within an additional container like this:

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

Adjust your CSS to ensure that the container can scroll:

#div3 {
    overflow-y: scroll;
}

Check out the modified fiddle to see this method in action.

Edit

If your goal is to determine if #div3 is the sole element within the viewport and occupies the entire viewport, you can use the following jQuery code:

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');
    }
});

While not flawless, this code illustrates the concept effectively.

Find the updated fiddle here.

Answer 2

To enable scrolling for #div3, you can enclose its content within an additional container like this:

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

Adjust your CSS to ensure that the container can scroll:

#div3 {
    overflow-y: scroll;
}

Check out the modified fiddle to see this method in action.

Edit

If your goal is to determine if #div3 is the sole element within the viewport and occupies the entire viewport, you can use the following jQuery code:

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');
    }
});

While not flawless, this code illustrates the concept effectively.

Find the updated fiddle here.

Answer 3

Answer №2

This may not be the most elegant solution but it gets the job done:

$(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/

Remember to adjust the min and max values to your specific requirements.

Answer 4

This may not be the most elegant solution but it gets the job done:

$(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/

Remember to adjust the min and max values to your specific requirements.

Answer 5

Answer №3

In response to your recent comments on the original post, I wanted to mention the effect you are looking for on the specified website is known as parallax scrolling. For examples, you can visit Parallax examples or follow a tutorial like the one provided here: Parallax scrolling tutorial. Please note, the advanced tutorial mentioned in the latter link may require payment.

If parallax scrolling is not what you are looking for, feel free to update your question accordingly, similar to how you previously modified the overflow-y: scroll property.

Answer 6

In response to your recent comments on the original post, I wanted to mention the effect you are looking for on the specified website is known as parallax scrolling. For examples, you can visit Parallax examples or follow a tutorial like the one provided here: Parallax scrolling tutorial. Please note, the advanced tutorial mentioned in the latter link may require payment.

If parallax scrolling is not what you are looking for, feel free to update your question accordingly, similar to how you previously modified the overflow-y: scroll property.

Create a specific part of a webpage that can be scrolled through

Answer №1

Answer №2

Answer №3

Similar questions

What sets npm node-sass apart from npm sass?

An issue of an infinite loop arises when utilizing the updated() lifecycle hook in VueJS

The alignment of buttons is not defined for ASP buttons and Bootstrap dropdowns

Identify whether the Vue model change was initiated by user input or programmatically

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

The Facebook page plugin fails to function properly following an AJAX page load

Using dual ngFor in Angular 4: A step-by-step guide

What method does the browser use to select the srcset image for loading when no sizes attribute is included?

Strategies for managing large numbers within WebGL GLSL shader programs

Could not locate the express.js file

Transferring the value of my PHP variable to a JavaScript file

The Font Awesome icon is not displaying on top of the Materialize CSS progress/determinate bar

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

What is the method for retrieving an array or object that contains a collection of files designated for uploading within the jQuery file upload plugin?

Ensuring the Selection with jQuery

The div above the footer seems to be interfering with the styling of the footer. Is there a solution to

Implementation of internationalization into a JSON-formatted data file

Automatically update Dropdown options with value and text through an ajax json request

The componentDidUpdate method is functioning by comparing the previous state with the current state on different triggers

Retrieve the current URL upon page load