Блог

Главная - Вопросы по программированию - Включить прокрутку в div только тогда, когда div отображается полностью

Включить прокрутку в div только тогда, когда div отображается полностью

#css #scroll

#css #прокрутка

Вопрос:

У меня есть #header (высота 50 или 100 вч, без переполнения) и #main (100 вч, переполненное содержимое). Я знаю, что могу включить прокрутку с помощью overflow:auto ; но я не хочу, чтобы это содержимое прокручивалось отдельно от окна до тех пор, пока не будет отображено все #content целиком (иначе #header вне поля зрения). Возможно ли это — за исключением вставки кнопки щелчка для автоматической прокрутки заголовка и сохранения его вне поля зрения? (Я добавил к этому оригинальный ответ ниже; не могу сказать, что мешает ему работать.)

 $(function(){    
    let header = document.querySelector('#splash');
    let content = document.querySelector('#content');
    
    const overflowHandler = () => {
        if (window.scrollY >= header.offsetHeight) {
            content.style.overflow = 'auto';
        } else {
            content.style.overflow = 'hidden';
        }
    }    
    window.addEventListener('scroll', overflowHandler);
    
    // Sticky Nav
    var navbar = document.querySelector("#nav");
    var stick = navbar.offsetTop;
    window.onscroll = function stickyNavBar() {
        if (window.pageYOffset >= stick) {
            navbar.classList.add("sticky");
        } else {
            navbar.classList.remove("sticky");
        }
    };
    
    // Scroll-to-Top
    var sbTopBtn = $('#nav').find("a#top")
    $('.autopagerize_page_element').scroll(function() {
        400 < $(this).scrollTop() ? sbTopBtn.addClass('active') : sbTopBtn.removeClass('active');
    });
    sbTopBtn.click(function(event) {
        event.preventDefault();
        if ($(this).hasClass('active')){
            $('.autopagerize_page_element').animate({scrollTop: 0},600);
            $('body').animate({scrollTop: 0},600);
        }
    });
})(jQuery);  
 body {
  width: 100%; 
  margin: 0; 
  padding: 0; 
  text-align: center;
}

#splash {
  width: 100%;
  height: 50vh;
  background: #f00;
}

#nav {
  width: 100%;
  background: #eee;
  z-index: 5;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

#content {
  max-height: 100vh;
  margin: 0 auto;
  overflow: auto;
  background: #0f0;
  display: flex;
  flex-direction: row;
}

#prev, #next {
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #000;
  font-size: 4rem;
}

.autopagerize_page_element {
  max-height: 100vh;
  overflow: auto;
}  
 <body>
  <section id="splash">
    contains 1 image and assorted text in two separate divs
    header height can be 50vh (current), 100vh, or user-defined<br>
    main panel and pagination buttons are 100vh; #content can scroll<br>
    sticky nav and scroll-to-top functions don't seem to work on this snippet 
    (latter currently won't scroll #content), but i left <br>them in just in 
    case they're contributing to the nonfunctionality of the proposed "all 
    elements scroll as unit" function.
  </section>

  <section id="nav">
    contains 5 FontAwesome icons. the center one is actually a div with a scroll-to-top function<br>
    <a id="top" href="#">demo scrolls abruptly</a>
  </section>

  <section id="content">
    <a id="prev" href="PREV"><</a>
    <div class="autopagerize_page_element"><article class="post" id="{PostID}">
      (autopagerize div left does infinite scroll with extra JS; it currently restricts
      #content's height to 100vh)<br>
      even if the cursor is over this div, this should scroll with the rest of the page
      page until head is offscreen. in other words, this div's scroll should not work 
      until the red is offscreen<br>filler<br>filler<br>filler<br>filler<br>filler
      <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
      <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
      <br>filler<br>filler<br>filler<br>pls don't look at me if red isn't offscreen
      <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
      <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
      <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
      <br>filler<br>filler<br>filler<br>end of content end of content end of content
    </article></div>
    <a id="next" href="NEXT">></a>
  </section>
</body>

Ответ №1:

Вот решение на javascript

 let header = document.querySelector('#header');
let content = document.querySelector('#main');

const overflowHandler = () => {
  if (window.scrollY >= header.offsetHeight) {
    content.style.overflow = 'auto';
  } else {
    content.style.overflow = 'hidden';
  }
}

window.addEventListener('scroll', overflowHandler);  
 body {width: 100%; margin: 0; padding: 0; overflow: auto}

#header {
    width: 100%;
    height: 50vh;
    background: #f00;
}

#main {
    width: calc(100% - 100px);
    max-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background: #0f0;
}

.prev, .next {
    position: absolute;
    z-index: 3;
    height: 100vh;
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #000;
    font-size: 4rem;
}

.prev {left: 0;}
.next {right: 0;}  
 <body>
<div id="header">
    header height can be 50vh, 100vh, or user-defined<br>
    pagination controls buttons are 100vh<br>
    main panel is 100vh with scrollable contents<br>
    (still figuring out how to make the whole pagination bar clickable, not just < a >)
</div>
<div id="main">
  <div class="prev"><a href="PREV"><</a></div>
    <div class="next"><a href="NEXT">></a></div>
    even if the cursor is over this div, this should scroll with the rest of the page
    page until head is offscreen. in other words, this div's scroll should not work 
    until the red is offscreen<br>filler<br>filler<br>filler<br>filler<br>filler
    <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
    <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
    <br>filler<br>filler<br>filler<br>pls don't look at me if red isn't offscreen<br>
    <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
    <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
    <br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler<br>filler
    <br>filler<br>filler<br>filler<br>end of content end of content end of content
</div>
</body>

Комментарии:

1. Делает то, что я хочу, но, возможно, не идеально. На этом рабочем столе обратное (прокрутка заголовка # обратно в поле зрения), похоже, не работает, пока я снова не наведу курсор (в любом месте окна), но я не знаю, мне только кажется, или это действительно будет проблемой в долгосрочной перспективе. Я также надеялся переработать базовый макет и для мобильных дисплеев (отсюда и кнопки разбиения на страницы на 100 вч).

2. Хм, после вставки на мою страницу (прямо перед </body>, над всеми другими моими JS), похоже, это больше не работает. Может быть, мне все-таки не стоит заниматься этим? Спасибо и извините, что отнял у вас время.

3. все в порядке, не могли бы вы обновить свой пост своим текущим кодом?

4. Я обновил свой фрагмент более полным кодом с веб-страницы. Надеюсь, это поможет.

5. Импортируете ли вы jquery в свой проект?