How to handle the scroll not of the Body but of a Div

Question

How to handle the scroll not of the Body but of a Div

Navigation

#1 by (1 votes)

2

The question is how do I manipulate the scroll of a div ???; taking into account that this is modals and use fixed to cover the entire screen and all content that covers *

$(document).ready(function(){
  $('.see').click(function(e){
    var title_poster_fixed = $(this).closest('.poster').find('.title_poster').html();
    var all_paragraph = $(this).closest(".poster").find(".contents_paragraph").html();

    $('.title_poster_fixed').html(title_poster_fixed);
    $('.contents_paragraph_fixed').html(all_paragraph);

    $('body').css("overflow","hidden");
    $('.showing_information').addClass("active");
  });

  $('.exit-poster').click(function(){
    $('.showing_information').removeClass('active');
    $('body').css("overflow","auto");
  });
// -------------------------------

$('.subir_poster').click(function () {
  $('.showing_information').animate({
      scrollTop: '0px'
  },300);

  $(showing_information).scroll(function () {
    if ( $(this).scrollTop() > 0 ) {
      $('.subir_poster').slideDown(300);
    }else{
      $('.subir_poster').slideUp(300);
    }
  }) ;// EL punto y coma lo pide el plugin

});





});

 **Estructura y estilos del Div el cual tiene un scroll por su tamaño de alto**

/*■■■■■■■■■■■■■■■■■■■■■■■ SECTION BODY ■■■■■■■■■■■■■■■■■■■■■■■■■*/
.hgroup{text-align: center;padding: 40px 0px 30px;}
.poster{
  width: 90%;
  z-index: 1000;
  font-size: 2rem;
  padding-bottom: 5px;
  margin-bottom: 2.9rem;
  box-sizing: border-box;
  background: rgb(242, 241, 242);
  box-shadow: 0px 1px 2px hsla(360, 100%, 00%, 0.5);
}
.title_poster{
  font-size: 1.5rem;
  padding: 10px 0px;
  text-align: center;
  border-bottom: 1px solid hsla(360, 100%, 0%, 0.1);
}
.title_poster .title_poster_fixed{margin-top: 40px;padding: 20px;box-sizing: border-box;}
.contents_paragraph{
  height: 205px;
  overflow:hidden;
  font-size: 1.2rem;
  padding: 5px 15px 0px 15px;
}
.see{
  padding: 7px;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 1rem 1rem;
  text-align: center;
  transition: all 0.3s;
  border-radius: 1.25rem;
  background: hsla(343,52%,26%,1);
}
.see:hover{
  background: hsla(343,52%,21%,1);
}
.showing_information{
  top: 0;
  width: 100%;
  height: 1000px;
  z-index: 1001;
  position: fixed;
  box-sizing: border-box;
  background: rgb(242, 241, 242);
  display:none; /* escondido por defecto */
  max-height:100%;
  overflow:auto;
}
.showing_information.active {
  display:block; /* lo mostramos si activo */
}
.contents_paragraph_fixed{
  padding: 20px 20px 100px;
  font-size: 1.2rem;
  text-align: justify;
}
.contents_paragraph_fixed p{
  display:block !important;
}
.exit-poster{
  right: 40;
  height: 35px;
  padding-top: 10px;
}
.exit-poster,.subir_poster{
  width: 60px;
  color: white;
  cursor: pointer;
  position: absolute;
  text-align: center;
  transition: all .3s;
  background: rgb(142, 57, 159);
}
.exit-poster:hover{
  background: none;
  color: rgb(142, 57, 159);
  max-height: 100%;
  box-shadow: 0px 1px  4px rgb(142, 57, 159) inset;
}
.subir_poster{
  right: 40;
  position: fixed;
  bottom: 30;
  opacity: 0.2;
  padding-top: 10px;
  z-index: 1002;
  height: 40px;
  font-size: 2rem;
}
.subir_poster:hover{
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
          <article class="poster">
            <header class="title_poster">Historia</header>
            <div class="contents_paragraph">
              <p class="fonts-4 paragraph-short">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="see color-1">Ver más</div>
          </article>
          <article class="poster">     <!--// Poster = cartel -->
            <header class="title_poster">Historia 2</header>     <!--// title_poster = titulo del cartel-->
            <div class="contents_paragraph">     <!--// contents_paragraph = Container del Parrafo-->
              <p class="fonts-4 paragraph-short">Lorem 2 ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
              <p class="fonts-4" style="display:none"> 44 exercitation 2 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="see color-1">Ver más</div>
          </article>


          <div class="showing_information">     <!--//showing_information = Mostrando Informacion-->
            <article class="contents_information">      <!--// contents_paragraph = Container del Parrafo-->
              <div class="exit-poster fonts-1">X</div> <!--// salir X -->
              <header class="title_poster">
                <div class="title_poster_fixed"></div>
              </header>
              <div class="contents_paragraph_fixed"></div>
              <div class="subir_poster font-4">^</div>
            </article>
          </div>



        </section>

jquery

asked by Gamez 26.04.2017 в 00:10

source

1 answer

Hamburger menu How can I make it responsive and correct the problems I have? Escape CDATA into another CDATA in XML

score 1 · Accepted Answer

The code you share is (almost) fine. You only have to correct a couple of errors so that everything works without problems:

In CSS: you have to add units to any value other than 0. That's why the .subir_poster button does not finish seeing well.
In the JS: you are missing some quotes to select the modal correctly (right now you select the variable showing_information that does not exist, when you should use the literal ".showing_information" instead).

With those two changes, your code already works:

$(document).ready(function(){
  $('.see').click(function(e){
    var title_poster_fixed = $(this).closest('.poster').find('.title_poster').html();
    var all_paragraph = $(this).closest(".poster").find(".contents_paragraph").html();

    $('.title_poster_fixed').html(title_poster_fixed);
    $('.contents_paragraph_fixed').html(all_paragraph);

    $('body').css("overflow","hidden");
    $('.showing_information').addClass("active");
  });

  $('.exit-poster').click(function(){
    $('.showing_information').removeClass('active');
    $('body').css("overflow","auto");
  });
// -------------------------------

$('.subir_poster').click(function () {
  $('.showing_information').animate({
      scrollTop: '0px'
  },300);

  $(".showing_information").scroll(function () {
    if ( $(this).scrollTop() > 0 ) {
      $('.subir_poster').slideDown(300);
    }else{
      $('.subir_poster').slideUp(300);
    }
  }) ;// EL punto y coma lo pide el plugin

});





});

**Estructura y estilos del Div el cual tiene un scroll por su tamaño de alto**

/*■■■■■■■■■■■■■■■■■■■■■■■ SECTION BODY ■■■■■■■■■■■■■■■■■■■■■■■■■*/
.hgroup{text-align: center;padding: 40px 0px 30px;}
.poster{
  width: 90%;
  z-index: 1000;
  font-size: 2rem;
  padding-bottom: 5px;
  margin-bottom: 2.9rem;
  box-sizing: border-box;
  background: rgb(242, 241, 242);
  box-shadow: 0px 1px 2px hsla(360, 100%, 00%, 0.5);
}
.title_poster{
  font-size: 1.5rem;
  padding: 10px 0px;
  text-align: center;
  border-bottom: 1px solid hsla(360, 100%, 0%, 0.1);
}
.title_poster .title_poster_fixed{margin-top: 40px;padding: 20px;box-sizing: border-box;}
.contents_paragraph{
  height: 205px;
  overflow:hidden;
  font-size: 1.2rem;
  padding: 5px 15px 0px 15px;
}
.see{
  padding: 7px;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 1rem 1rem;
  text-align: center;
  transition: all 0.3s;
  border-radius: 1.25rem;
  background: hsla(343,52%,26%,1);
}
.see:hover{
  background: hsla(343,52%,21%,1);
}
.showing_information{
  top: 0;
  width: 100%;
  height: 1000px;
  z-index: 1001;
  position: fixed;
  box-sizing: border-box;
  background: rgb(242, 241, 242);
  display:none; /* escondido por defecto */
  max-height:100%;
  overflow:auto;
}
.showing_information.active {
  display:block; /* lo mostramos si activo */
}
.contents_paragraph_fixed{
  padding: 20px 20px 100px;
  font-size: 1.2rem;
  text-align: justify;
}
.contents_paragraph_fixed p{
  display:block !important;
}
.exit-poster{
  right: 40;
  height: 35px;
  padding-top: 10px;
}
.exit-poster,.subir_poster{
  width: 60px;
  color: white;
  cursor: pointer;
  position: absolute;
  text-align: center;
  transition: all .3s;
  background: rgb(142, 57, 159);
}
.exit-poster:hover{
  background: none;
  color: rgb(142, 57, 159);
  max-height: 100%;
  box-shadow: 0px 1px  4px rgb(142, 57, 159) inset;
}
.subir_poster{
  right: 40px;
  position: fixed;
  bottom: 30px;
  opacity: 0.2;
  padding-top: 10px;
  z-index: 1002;
  height: 40px;
  font-size: 2rem;
}
.subir_poster:hover{
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
          <article class="poster">
            <header class="title_poster">Historia</header>
            <div class="contents_paragraph">
              <p class="fonts-4 paragraph-short">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="see color-1">Ver más</div>
          </article>
          <article class="poster">     <!--// Poster = cartel -->
            <header class="title_poster">Historia 2</header>     <!--// title_poster = titulo del cartel-->
            <div class="contents_paragraph">     <!--// contents_paragraph = Container del Parrafo-->
              <p class="fonts-4 paragraph-short">Lorem 2 ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
              <p class="fonts-4" style="display:none"> 44 exercitation 2 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="see color-1">Ver más</div>
          </article>


          <div class="showing_information">     <!--//showing_information = Mostrando Informacion-->
            <article class="contents_information">      <!--// contents_paragraph = Container del Parrafo-->
              <div class="exit-poster fonts-1">X</div> <!--// salir X -->
              <header class="title_poster">
                <div class="title_poster_fixed"></div>
              </header>
              <div class="contents_paragraph_fixed"></div>
              <div class="subir_poster font-4">^</div>
            </article>
          </div>



        </section>