I would like to set the page to end (stop scrolling) at a certain web part. The reason is, I have a large area at the bottom of my page that I don't want to show. The reason I have this space is because I have multiple webparts that are set to position:relative so that they overlap. It appears when you do this, you are left with whitespace of where the webpart originally lived.

Anyone know CSS code or JavaScript code I could use to say 'When scrolling reaches this webpart, don't let scrolling go any further'?



  • Is it content you do not want other users to see, where is it created? MasterPage or WebParts? Does the content need to be (hidden) on the page for other WebParts to work? Or you don't like a lot of whitespace? Nov 28 '16 at 10:33

Thanks - I actually finally figured it out.

I couldn't use display:none because I still needed the webpart to display. The key to get the negative margin to work was float left. I never tried this because I wanted my items centered. Adding a width 100%; aligned it back up and now I have no blank areas from where the webparts were!

My code giving me blank areas:

position: relative;
top: -150px;

How to fix it:

position: relative;
float: left
width: 100%;
top: -150px;
margin-top: -150px;

Answer is Content Editor Web Part:


  1. Create the group or audience of people to hide web parts from users you do not want to scroll
  2. Take ID of web part that is taking up the space (F12 Method)
  3. Add below css in CEWP that will hide the web part space

<style type="text/css">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.