Hide the scrollbar in the div depending on the specified condition

I'm having trouble with this particular process and haven't been successful so far...

I currently have a customized scrollbar within a div element, and what I am attempting to do is remove the scrollbar when the height of the div is less than 196px, and display the scrollbar when it exceeds 196px. Apologies for any language difficulties, and thank you for any assistance!

$(".scrollbar").scroll(function() {
  var h = this.innerHeight;
  if (h > 100) {
    $(".cstm").addClass("scrollbar");
  } else {
    $('.cstm').removeClass("scrollbar");
  }
});
.scrollbar {
  height: 196px;
  overflow-y: scroll;
  padding: 4px;
}

#style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: red;
}

#style-3::-webkit-scrollbar {
  width: 4px;
  background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb {
  background-color: #000000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="cstm scrollbar" id="style-3" style="display: block;">
  <div class="my-box">
    <div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
      <center>
        <i class="animated flash fa fa-times-circle"></i> INFO BOX 1
      </center>
    </div><br>
    <div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
      <center>INFO BOX 2 </center>
    </div><br>
    <div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
      <center> ON FEW BOXES THE RED SCROLL TO BE REMOVED</center>
    </div><br>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

Great news! I was able to achieve the desired outcome using the setInterval function. This function continuously executes its statements. When the height exceeds 100px, the class is added; otherwise, it is removed.

You can observe this behavior in the snippet provided below.

I hope this solution proves to be helpful for you.

setInterval(function(){ 
     var h = $(".scrollbar").height();

     if (h > 100) {
        $(".cstm").addClass("scrollbar");
     } else  { 
       $('.cstm').removeClass("scrollbar");
     }    
}, 50);
 .scrollbar {
    height: 196px;
    overflow-y: scroll;
    padding: 4px;
}
#style-3::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: red;
}

#style-3::-webkit-scrollbar
{
  width: 4px;
  background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
  background-color: #000000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="cstm scrollbar" id="style-3" style="display: block;">
    <div class="my-box"> 
    <div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
    <center>
    <i class="animated flash fa fa-times-circle"></i> 
    INFO BOX 1
    </center>
    </div><br>
    <div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
    <center>INFO BOX 2 </center>
    </div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
    <center>INFO BOX 3 </center>
    </div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
    <center>INFO BOX 4 </center>
    </div><br>
<div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
    <center>INFO BOX 5 </center>
    </div><br>
    <div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
    <center>INFO BOX 6 </center>
    </div><br>
    <div class="animated slideInUp" style="margin-bottom: -22px;font-size: 12px;background: #f5f5f5;color: #e60000;border-radius: 3px;padding: 2px;">
    <center> ON FEW BOXES THE RED SCROLL TO BE REMOVED</center>
    </div><br>
    </div>
 </div>

Answer №2

What browser are you using for testing? I ran the sample on your src with Chrome and it appears to be functioning correctly.

Answer №3

Here's a suggestion:

  max-height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  &::-webkit-scrollbar
    {
      width:0px;
    }

To ensure limited height, set max-height and hide the vertical overflow with overflow-y. Include the scroll bar width definition as shown in the code above. Hope this advice proves useful.

Answer №4

Instead of simply removing the scrollbar class, consider adding a specific class that indicates no-scrollbar behavior:

$(".scrollbar").scroll(function () {
      var h = this.innerHeight;
      if (h > 100) {
        $(".cstm").addClass("scrollbar");
     } else  {
       $('.cstm').removeClass("scrollbar");
       $(".cstm").addClass("no-scrollbar"); 
     }
});

.no-scrollbar {
  overflow-y: hidden;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update a div with ajax

I am looking to refresh a select element (identified by its id) once the ajax call has been successfully completed. However, I am unsure of how to go about this. Ajax Function : $('#insertForm').on('click', function(){ var form_inti ...

phpjqueryajax

Express.js returning unexpected results when calling MySQL stored procedures

I've encountered a strange issue with a stored procedure called getUsers in MYSQL. When I execute the procedure in phpmyadmin, it returns a table of users with their data perfectly fine. However, when I try to call the same procedure from my Node.js a ...

javascriptmysqlnode.jsexpressstored-procedures

React - the perfect solution for managing dynamic inline styles

When it comes to handling inline styles, there are two scenarios to consider. Which approach is the most effective for 'toggling' CSS properties based on the component state - or is there a better alternative? 1. The first method involves creati ...

javascriptcssreactjs

Displaying an RSS feed inside a designated div element

Seeking assistance from all you wonderful individuals for what seems to be a simple problem. Here is the HTML code I am working with: <div id="rssfeed"></div> Along with JavaScript that includes the FeedEK plugin $(document).ready(function ...

javascriptjqueryajaxxml

Exploring the hover functionality in GetOrgChart

Exploring mouse hover functionality in Getorgchart view. Looking to implement the mouse hover and mouse out events in Getorgchart view. Can I access the org chart element details during mouse hover/leave actions? ...

javascriptorgchartgetorgchart

Filtering a deeply nested object based on an array of keys in JavaScript

I have received an object and an array. My task is to filter the object so that it only contains nodes where either the key or the value matches with the keys provided in the array. For example: Array containing keys - ['student1', 'STU&apo ...

javascriptarraysobject

Ways to upload the modal to the controller and update the ajax post-modal dialog for editing concludes

Let's discuss a scenario: I have implemented uikit for displaying a dialog on the home page like this: <div id="modalEdit" class="uk-modal"> <div class="uk-modal-dialog uk-modal-dialog-slide"> <a href="" class="uk-modal-cl ...

jqueryajaxasp.net-mvc-4

Error: Unable to access the 'rotation' property of an undefined object in the animate function on line 266 of index.html, at line 287 of index.html

I am facing an error when trying to animate a model with rotation or position in my code. I attempted to create an init function to run everything, but it did not resolve the issue. The error only appears during animation; once the animation stops, the e ...

javascriptthree.js

Generate a pair of rows using input-prepend

I am attempting to place two buttons on either side of the search field, so I implemented the following code: <div id="fixtures-filter"> <div class="input-group-btn"> <div class="input-group-prepend"><button type="button" class= ...

htmlcssbootstrap-4

What is the best way to store a username and password within a JavaScript object in ReactJS?

I am encountering an issue with obtaining the login credentials from the object. Although the code snippet below functions perfectly well with other forms. SignIn.js export default function SignIn(props) { const [state, setState] = useState({ userna ...

javascriptreactjsrest

The functionality of Flatbutton(Input handler) appears to be malfunctioning

I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...

javascripthtmlreactjsmaterial-designmaterial-ui

Employing CSS selectors to target the subsequent element that is accessible

Here is the structure of my HTML: <input type = "checkbox" style = "display:none" id = "select"> <label for = "select" id = 'click'> click </label> <div class = 'next'> </div> I am trying to style t ...

htmlcsscss-selectors

What is the method for accessing a local XML file with $.ajax?

Currently, I am working on developing a Firefox extension that requires reading a local XML file. However, I have encountered an issue with using $.ajax to read the file. Here is a snippet of my code: $.ajax({ type: "GET", url: "file:/// ...

javascriptjqueryxmlajaxfirefox-addon

Exploring the Matrix Filter Functionality in JavaScript

After successfully setting up CSS rotation for all browsers, I am now looking to achieve the same effect using JavaScript. jQuery is also being utilized in this process with the following code snippet: .css({ '-ms-filter':"progid:DXImageTransfor ...

javascriptjquerycssinternet-explorermatrix

What is the best way to display JSON within a partial?

Within my Rails app, I have implemented a JavaScript graph. Whenever I click on a circle in the graph, it displays the name of the corresponding user. Now, my goal is to retrieve additional information from the related database table based on this user&apo ...

javascriptjqueryruby-on-railsjson

Transmitting a chunk of HTML to a distant server following the completion of the initial form submission

// Modified // The main concern here is the most effective way to transmit a potentially large block of dynamically generated HTML to a remote server after form processing. // End Modification A client has a registration form that is shared across multi ...

phphtmlpostcurl

Transmitting JavaScript Arrays within Arrays via Ajax

I am receiving my fields as an array using JavaScript. Each field in the array contains properties. For example: arr[0] { 'id':'1', 'title':'testtitle', 'value': 'test value' } arr[1] { ...

jqueryajaxjsontinymce

The $digest function in Angular's $rootScope

While engrossed in the incredible book, Mastering Web Development in AngularJS, I stumbled upon this code snippet: var Restaurant = function ($q, $rootScope) { var currentOrder; this.takeOrder = function (orderedItems) { currentOrder = { deferred ...

javascriptangularjs

Using Jquery to Modify Information within HTML Table Cells

My dilemma involves an HTML table where each cell will have two data attributes. My goal is to create a button that toggles the value displayed in the table between these two attributes. <table class="table1"> <tbody> <tr> <td data-or ...

javascriptjqueryhtml-table

Does CSS media query "@media only screen" only work when I am resizing the window?

I recently encountered an issue with the code found on this website (the repository can be viewed on Github here): @media only screen and (max-width: 600px) { img {width: 100%; height: 100%; margin: 0; padding: 0; } a.box { width: 100%; pa ...

cssfirefox