V
V
vovaaar2019-02-08 21:26:30
css
vovaaar, 2019-02-08 21:26:30

how to get block height with jquery

There is a block in which scrolling occurs. The NiceScroll plugin is screwed. To work correctly, you need to set the height in css for this block.
When new elements are added to the block, I need to take its height so that the scroll is always at the bottom. To see only what is relevant.
My code:

<div class="battle-plan-plash">
  <div class="battle-plan-plash-holder scroll-js">
  </div>
</div>

.battle-plan-plash-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  max-width: 330px;
  padding: 0 15px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(0, 0, 0, .3);
}

.battle-plan-plash-step {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 5px;
}

function bottomScroll(selector) {

  $(selector).getNiceScroll(0).doScrollTop($(selector).height() + 1, 1);
  console.log('Высота прокручиваемого блока: ' + $(selector).height());
}

$('.scroll-js').niceScroll({
  cursorcolor: "#424242", // change cursor color in hex
  cursoropacitymin: .3, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
  cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
  cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
  cursorborder: "1px solid #5c5a6b", // css definition for cursor border
  cursorborderradius: "5px", // border radius in pixel for cursor
  scrollspeed: 40, // scrolling speed
  mousescrollstep: 30, // scrolling speed with mouse wheel (pixel)   
  //background: "#353542", // change css for rail background
  cursorminheight: 32, // set the minimum cursor height (pixel)
  autohidemode: "leave",
});

setInterval(function() {
  $('.battle-plan-plash-holder').append('<div class="battle-plan-plash-step">hello</div>');
  bottomScroll('.battle-plan-plash-holder');
}, 500)

It works well until it hits max-height: 200px; I put it in css myself. Without it, vertical scrolling does not work.
The problem is that the function that takes the height of the block when it reaches 200 px does not update longer, since a fix is ​​given. How to overcome? All the best!

Answer the question

In order to leave comments, you need to log in

2 answer(s)
B
bpGusar, 2019-02-08
@vovaaar

https://jsfiddle.net/0pf8am23/1/
not great but it works, finished drinking and it will be fine

V
Vladimir, 2019-02-08
@djQuery

You would have posted the code on jsfiddle, people would have reached out ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question