About jQuery Horizontal Scroll Events

I would like to use Jquery to change the class if it exceeds a certain value.

What you want to do
1: Set the designated CSS to reduce the screen to 720px or less.
2:Set the designated CSS even if the screen is 721px or higher horizontally

What do you want to check?
If the screen is reduced, the event will ignite, but if it is enlarged, the event will not ignite, so I would appreciate it if you could let me know.

``
<body>
  <div class="tabbody">
    <table>
      <thead>
        <tr>
          <th class="w-5" id="tr-no">No.</th>
          <th class="w-10">Status</th>
          <th class="w-25"> Test code </th>
          <th class="w-40" id="tr-agency-name">Branch name</th>
          <th class="w-25" id="last-update"> Last update date </th>
          <th class="w-10tcenter">Check </th>
          <th class="> Query </th>
          <th>/th>
        </tr>
      </thead>
    <table>
  </div>


</body>

$(function(){
	vartabbody=$('.tabbody');

	tabbody.scrollLeft(function(){

	 if($(window).scrollLeft(720){
		      console.log("This is Called")
				$('#tr-no').removeClass('w5').addClass('w-7');
				$('#tr-agency-name').removeClass('w40').addClass('w38');
				$('#last-update') .removeClass('w15').addClass('w15-7');

	 } else if ($(window).scrollLeft(721)){
     console.log("Not Called Here"")
		 $('#tr-no').removeClass('w7').addClass('w-5');
		 $('#tr-agency-name').removeClass('w38').addClass('w40');
		 $('#last-update').removeClass('w15-7').addClass('w15');
	 }
 });
});

javascript jquery

2022-09-30 19:11

1 Answers

The .resize method was used instead of .scrollLeft.

2022-09-30 19:11

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656