{"id":182,"date":"2024-06-05T15:40:17","date_gmt":"2024-06-05T21:40:17","guid":{"rendered":"https:\/\/www.mariatech.com.mx\/blog\/?p=182"},"modified":"2024-06-05T15:50:14","modified_gmt":"2024-06-05T21:50:14","slug":"fallo-en-bootstrap-collapse-desplaza-hacia-abajo","status":"publish","type":"post","link":"https:\/\/www.mariatech.com.mx\/blog\/jquery\/fallo-en-bootstrap-collapse-desplaza-hacia-abajo\/","title":{"rendered":"Fallo en Bootstrap Collapse desplaza hacia abajo"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Este es un problema poco com\u00fan que se nos present\u00f3 en la versi\u00f3n de <em>Bootstrap 4<\/em>, al momento de hacer clic en un componente para desplegar el contenido, enseguida nos env\u00eda al final de la pantalla.<br>Nosotros nos dimos cuenta que el error se presenta cuando cualquiera de los componentes tiene una altura muy amplia y eso provoca que se tenga que hacer scroll hacia abajo para poder ver los otros componentes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"573\" src=\"https:\/\/www.mariatech.com.mx\/blog\/wp-content\/uploads\/2024\/06\/collapse-2.webp\" alt=\"collapse\n\" class=\"wp-image-185\" style=\"width:543px;height:auto\" srcset=\"https:\/\/www.mariatech.com.mx\/blog\/wp-content\/uploads\/2024\/06\/collapse-2.webp 838w, https:\/\/www.mariatech.com.mx\/blog\/wp-content\/uploads\/2024\/06\/collapse-2-300x205.webp 300w, https:\/\/www.mariatech.com.mx\/blog\/wp-content\/uploads\/2024\/06\/collapse-2-768x525.webp 768w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/figure>\n\n\n<p>Existe varias alternativas para darle soluci\u00f3n a esto, aqu\u00ed te dejamos la que encontramos nosotros y nos pareci\u00f3 la mejor.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>$(document).on('shown.bs.collapse', function(event) {\n  var item_height = event.target.clientHeight,\n      window_height = window.innerHeight,\n      offset_top = event.target.offsetTop,\n      scroll_y = window.scrollY;\n  \n  if (scroll_y &gt; (window_height - item_height)) {\n    $('html, body').animate({\n       scrollTop: ((window_height - item_height) \/ 2) + offset_top\n    }, 1000);\n  }\n}<\/code><\/pre>\n\n\n<h5>Paso a paso<\/h5>\n<ol>\n<li>Detectamos cada vez que ocurre el evento de collapse<\/li>\n<li>Definimos las variables con las que vamos hacer nuestros c\u00e1lculos<br \/><strong>item_height<\/strong>: Altura de nuestro componente<br \/><strong>window_height: <\/strong>Altura de la venta<br \/><strong>offset_top: <\/strong>Distancia de la parte de arriba entre componentes<br \/><strong>scroll_y: <\/strong>Valor del scroll en el eje Y<\/li>\n<li>Si el valor del scroll en eje Y es mayor a la altura de nuestra venta menos el valor del componente quiere decir que el scroll ya fue recorrido hacia abajo y si es el caso entonces se presentar\u00e1 el fallo;<\/li>\n<li>Hacemos que nos retorno hacia arriba procurando que la informaci\u00f3n del complemento desplazado quede centrada y visible en la ventana para el usuario<\/li>\n<\/ol>\n\n<p>Referencias:<\/p>\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-behavior\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-behavior<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/collapse\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/getbootstrap.com\/docs\/4.0\/components\/collapse\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/31100690\/using-bootstrap-data-toggle-collapse-and-scrollintoview-to-show-and-scroll-t\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/stackoverflow.com\/questions\/31100690\/using-bootstrap-data-toggle-collapse-and-scrollintoview-to-show-and-scroll-t<\/a><\/p>\n\n\n<h6>Esperamos que te pueda servir esta soluci\u00f3n, si fue as\u00ed d\u00e9janos tu comentario, bye<\/h6>","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo resolver el problema cuando al dar clic en un componente de collapse nos env\u00eda hasta el final de la pantalla, impidiendo que el usuario vea la informaci\u00f3n&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,10],"tags":[34,35,36],"class_list":["post-182","post","type-post","status-publish","format-standard","hentry","category-jquery","category-bootstrap","tag-bootstrap","tag-jquery","tag-collapse"],"_links":{"self":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/posts\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":0,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/posts\/182\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mariatech.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}