how to disable a specific css element from js?

Question

So I have a html table that has a scroller(its a long table) and a search bar.The table is so long in fact that i dont want the user to be able to scroll down until they have typed a few letters in the search bar and the table has been shortened. Here is the css :

.table{
display: block;
height: 100px;
 overflow-y: scroll;
overflow-x: hidden; 
}

how do i disable the "overflow-y: scroll" in code?

Here is another solution to disable scroll http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — Babar Hussain, Apr 04 '17 at 21:22

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

With javascript

document.getElementById("element_id").style.overflow = 'hidden';

Disable scroll events found here

How to disable scrolling temporarily?

With jquery

$(".table").css("overflow-y", "none");

edited May 23 '17 at 12:32

Community

1
1

answered Apr 04 '17 at 21:25

Babar Hussain

2,917
1
17
14

score 0 · Answer 2 · answered Apr 04 '17 at 21:20

0

One way to do it is using jQuery.

if($('#div').html().length >0)
     $('.table').css('overflow-y','scroll');
else
     $('.table').css('overflow-y','hidden');

answered Apr 04 '17 at 21:20

etrx2cs

21
2

score 0 · Answer 3 · answered Apr 04 '17 at 21:26

You can use getComputedStyle() to check the value of overflow-y if you need to toggle it. Otherwise set it directly with the style property.

var target = document.querySelector( 'div' );
var btn    = document.querySelector( 'button' );

btn.addEventListener( 'click', function ( e ) {

  var overflowY = getComputedStyle( target ).overflowY;
  
  target.style.overflowY = 'scroll' === overflowY ? 'initial' : 'scroll';

} );

div {
  height: 150px;
  overflow-y: scroll;
}

<button>Change Overflow Y</button>

<div>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>
  
</div>

You could also use auto in place of scroll in the code above.

score 0 · Answer 4 · answered Apr 04 '17 at 21:27

0

If you can't touch the CSS and need to use javascript:

var table = document.querySelector('.table');

table.style.overflowY='hidden';

Hope that helps

answered Apr 04 '17 at 21:27

StefanBob

4,857
2
32
38

how to disable a specific css element from js?

4 Answers4