Styling the scrollbar for the PDF element on an HTML page

I have a div that contains an object "linked" to a .pdf file.

Is it possible to customize the scrollbar style using CSS or JavaScript/jQuery?

<div id="container">
  <object data="document.pdf" type="application/pdf" width="100%" height="100%">
  </object>
</div>

Another question: I attempted to pass data object this way:

<object data="document.pdf#view=Fit" type="application/pdf" width="100%" height="100%">
</object>

However, the PDF does not fit into the div. What am I doing wrong?

Edit

Starting with a simpler example, I tried to hide the scrollbar following this document, using this code fiddle.

Unfortunately, it did not work.

Could the issue be related to the browser? I am currently using Chrome on Ubuntu.

Answer №1

If you're looking for the answer to your first question, check out this link:

We hope this URL is useful to you.

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

Retrieving information from an object using a randomly generated identifier

Imagine having an object structured like this. var foo = { "dfsghasdgsad":{ "name":"bob", "age":"27" } }; The variable foo will consistently only have one object, but the key is dynamically created. How can I access the values "bob" and "27" ...

What is the best way to retrieve the 'date,time' column from a MySQL database and use it as input for the google chart DateRangeFilter?

I am facing an issue with a column in my dataset that contains date-time values, such as '2017-2-2 10:30:20'. I need to use these rows as an input for a Date Range Filter in Google Chart. Can someone guide me on how to achieve this? I attempted ...

Gain access to a variable within an AngularJS directive's scope

I am facing an issue with the following directive var chartDir = function () { return { scope: { stat: '=' }, link: function (scope, element, attr) { console.log(scope); return; } } HTML < ...

Using Vue.js to increment a value in an array every time a new row is added

In Vue.js, I am attempting to increment an array value when adding a new row. However, I encounter the following error message: You may have an infinite update loop in a component render function. The JavaScript logic looks like this: new Vue({ el: ...

How the React Component Class Executes OnChange Event in a Closure

When working on my React code, I found myself creating a closure by calling "onChange." class CityInput extends React.Component { constructor( props ){ super( props ); this.state = { city : "", country : "" ...

Identifying the user's location within the application and dynamically loading various Angular scripts

Currently, I am working on a large-scale web application using Laravel and Angular. In this project, I have integrated various angular modules that come with their own controllers, directives, and views. One challenge I am facing is the need to load diffe ...

acquire the document via ng-change

I need help converting this code to be compatible with angular.js so that I can retrieve the data URL and send it using $http.post <input type="file" id="imgfiles" name="imgfiles" accept="image/jpeg" onchange="readURL(this);"> function readURL(i ...

Reverting to the original order in jQuery DataTables after dropping a row

Recently, I've been attempting to utilize jQuery DataTables in conjunction with the Row Ordering plugin. At first, everything seemed to be functioning properly until a javascript error popped up indicating an unrecognized expression. After researching ...

sending numerous ajax requests and they all seem to be returning identical results

When firing multiple ajax requests using the setinterval() function, I noticed that both requests are bringing back the same information from another page. Here is the JavaScript code: function views() { setInterval(function(){var xmllhttp //alert ...

Logging in using email, phone number, or username on Node.js platform

How can I implement a login system in node.js and MongoDB that allows users to log in with their email, phone number, or username along with a password? Similar to the login functionality seen on Instagram, users should be able to enter their email or u ...

Button for navigating to the previous slide on a Jquery slider

There appears to be an issue with the code on the previous button. When the user presses "previous" on the first slide, there is a momentary blank slider before the last slide appears. Is there a way to make this transition smoother? Thank you for your a ...

Specify a preset selection time in a TextField of time type in Material UI

I am looking to establish a default time for a textfield of type time in Material UI. My requirement is that before the user clicks on the picker, no time should be pre-set, but once they click, 08:00 should appear as the default time to choose from. View ...

Exploring Fetch API with Promise.all

I have successfully implemented a functionality that fetches data from two URLs and performs an action only when both requests are successful. However, I am curious if there is a more efficient and succinct way to achieve the same result. Helper functions ...

Tips for utilizing variables as the initial value of a JSON Object

Here is a JSON configuration example: { "Users" : { "182723618273612" : 15, "AddedUser" : 1 } } I have generated this field using a JavaScript function, but now I want to change the name of "AddedUser" ...

The ng-switch function is not generating the desired code output

In my Ionic app, I have the following code snippet that I am currently viewing with ionic serve. However, when the initial ng-switch statement triggers... <span ng-switch="post.enclosure"> <span ng-switch-when="[]"> <p>def&l ...

Steps for extracting URL parameters from AWS API Gateway and passing them to a lambda function

After successfully setting up my API gateway and connecting it to my lambda function, I specified the URL as {id} with the intention of passing this parameter into the lambda. Despite numerous attempts using both the default template and a custom one for ...

Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example: .accordionButton .cyan:hover{ color: cyan; } I cannot s ...

Query the database and retrieve data using the POST method in PHP

Using the following SQL query in a link to extract information from a database <div class="nav-laptop"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' ORDER BY Proizvodac Asc;">L ...

As the user scrolls down, the navigation becomes obscured by the content

Whenever I scroll down on my website at Bradly Spicer, the navigation menu extends and ends up falling behind the content. This is the script I am using: .menu { position: relative; z-index:9999; } .post { background: #fff; border: 1px solid #ddd; font- ...

Having difficulty duplicating a button with a click event using jQuery

I have implemented a button that reveals a phone number when clicked using the code below: var shortNumber = $("#phone_ch").text().substring(0, $("#phone_ch").text().length - 12); var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGOR ...