Automatically scroll a div when the internal div is in focus

Question

Automatically scroll a div when the internal div is in focus

I want to create a scrollable div that allows for scrolling even when the mouse is over the content inside the div, not just on the blank areas beside it. Here is the code I am currently using:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}

It works fine in Chrome and IE8+ with a hack, but in Safari, the content shakes a lot when scrolling. Is there a way to fix this issue?

View a working example here: https://jsfiddle.net/8oj0sge4/6/

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
  main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}

#wrapper {
  width: 100%;
  height: 1500px;
  border: 1px solid red;
  padding-top: 380px;
}
#wrapper .container {
  border: 1px solid green;
  width: 100%;
  height: 500px;
  overflow: scroll;
}
#wrapper .container-scroll {
  height: 1500px;
  width: 100%;
  border: 1px solid yellow;
  position: relative;
}
#wrapper .main {
  width: 200px;
  height: 500px;
  background: black;
  overflow: scroll;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -100px;
  margin-top: 10px;
}

<div id="wrapper">
  <div class="container">
    <div class="container-scroll">
      <div id="main-site" class="main">
        My goal is to make the div container scroll even when the mouse hovers over this div in Safari. I already know how to make it work in Google and IE8, but Safari is shaking a lot!
      </div>
    </div>
  </div>
</div>

Thank you for any help.

javascript jquery html css

Answer 1

Answer №1

Utilize this demo to enable scrolling of div content on mouse hover and reverting back when the mouse is moved out of the div.

<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>

<script>
function loadpage()
{ document.getElementById('marquee1').stop();  }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>

</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()"     onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This     is my test content This is my test content This is my test content This is my     test 

content This is my test content This is my test content This is my test     content This is my test content This is my test content This is my test content     This is my test content This is my test content This is my test content 
</marquee>
</body>
</html>

Answer 2

Utilize this demo to enable scrolling of div content on mouse hover and reverting back when the mouse is moved out of the div.

<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>

<script>
function loadpage()
{ document.getElementById('marquee1').stop();  }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>

</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()"     onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This     is my test content This is my test content This is my test content This is my     test 

content This is my test content This is my test content This is my test     content This is my test content This is my test content This is my test content     This is my test content This is my test content This is my test content 
</marquee>
</body>
</html>

Answer 3

Answer №2

If you want to achieve a smooth scrolling effect, simply include this JavaScript file.

https://github.com/nathco/jQuery.scrollSpeed

Check out the live demo here.

Answer 4

If you want to achieve a smooth scrolling effect, simply include this JavaScript file.

https://github.com/nathco/jQuery.scrollSpeed

Check out the live demo here.

Answer 5

Answer №3

Uncertain about your intentions, but you can achieve a fixed position using CSS "fixed". This will keep the element in place wherever you position it. The following CSS code will fix the element to the bottom of the page.

.fixed {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: auto;
}

If you need information on retrieving scrollbar position using Javascript, this answer may help: How to get scrollbar position with Javascript?

Answer 6

Uncertain about your intentions, but you can achieve a fixed position using CSS "fixed". This will keep the element in place wherever you position it. The following CSS code will fix the element to the bottom of the page.

.fixed {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: auto;
}

If you need information on retrieving scrollbar position using Javascript, this answer may help: How to get scrollbar position with Javascript?

Answer 7

Answer №4

The importance of content selection is uncertain to me. Does it really need to be selectable?

If not necessary, a viable solution could involve utilizing

#wrapper .main{ pointer-events: none; }

. This would prevent the content from receiving any mouse events, allowing them to pass through to the element located behind it - in this scenario, the scroll would directly affect #wrapper.

Answer 8

The importance of content selection is uncertain to me. Does it really need to be selectable?

If not necessary, a viable solution could involve utilizing

#wrapper .main{ pointer-events: none; }

. This would prevent the content from receiving any mouse events, allowing them to pass through to the element located behind it - in this scenario, the scroll would directly affect #wrapper.

Answer 9

Answer №5

The reason Safari behaves this way is due to the unique scrolling mechanisms that each browser employs. When a website has a fixed header, Safari displays a bouncy effect when scrolling on a phone, while on a PC it behaves more smoothly. In comparison, Internet Explorer scrolls seamlessly, while Chrome jumps directly to the desired location without a gradual transition.

Answer 10

The reason Safari behaves this way is due to the unique scrolling mechanisms that each browser employs. When a website has a fixed header, Safari displays a bouncy effect when scrolling on a phone, while on a PC it behaves more smoothly. In comparison, Internet Explorer scrolls seamlessly, while Chrome jumps directly to the desired location without a gradual transition.

Answer 11

Answer №6

The reason behind the constant movement of your #main-site is due to the browser continuously updating the position of this specific element.

A useful solution to address this issue is by employing a technique known as the Debounce Function. This approach involves delaying the execution of the scroll event handler in order to eliminate any pending callbacks.

For your circumstance, you can implement the following code snippet:

main.parentNode.parentNode.onscroll = function(event) {
    debounce(offsetting, 10);
}

function offsetting() {
    main.style.top = Math.min(main.parentNode.parentNode.scrollTop, maxTop) + "px";       
}

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId = setTimeout(function(){
        method();
    }, delay);
}

If the jittering issue persists, you have the flexibility to adjust the delay parameter (e.g., revise 10 to 50). However, be aware that this may result in a temporary cutoff effect on your #main-site element, depending on the chosen delay settings.

Answer 12

The reason behind the constant movement of your #main-site is due to the browser continuously updating the position of this specific element.

A useful solution to address this issue is by employing a technique known as the Debounce Function. This approach involves delaying the execution of the scroll event handler in order to eliminate any pending callbacks.

For your circumstance, you can implement the following code snippet:

main.parentNode.parentNode.onscroll = function(event) {
    debounce(offsetting, 10);
}

function offsetting() {
    main.style.top = Math.min(main.parentNode.parentNode.scrollTop, maxTop) + "px";       
}

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId = setTimeout(function(){
        method();
    }, delay);
}

If the jittering issue persists, you have the flexibility to adjust the delay parameter (e.g., revise 10 to 50). However, be aware that this may result in a temporary cutoff effect on your #main-site element, depending on the chosen delay settings.

Answer 13

Answer №7

It seems like your code is running smoothly on Chrome and IE, but there could be a potential issue with the scrollHeight or offsetHeight attribute when it comes to Safari. I suggest utilizing the getBoundingClientRect method for determining the position of elements, as it is known to be more dependable and precise.

var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

Answer 14

It seems like your code is running smoothly on Chrome and IE, but there could be a potential issue with the scrollHeight or offsetHeight attribute when it comes to Safari. I suggest utilizing the getBoundingClientRect method for determining the position of elements, as it is known to be more dependable and precise.

var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

Automatically scroll a div when the internal div is in focus

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

Despite encountering Error 404 with AJAX XHR, the request is successfully reaching the Spring Controller

Display an array comprising of other arrays

Experiencing problems with malfunctioning javascript tabs

Send the DOM element to a processing function within AngularJS

Ways to transmit the appropriate model

The GIF Loader fails to animate while an AJAX request is in progress

The limitations of Typescript types influence the program's behavior

Showing a variety of pictures within a specified time frame

Tips for tailoring content based on screen size

Is there a way to imitate a method that initiates an AJAX request?

Tips for concealing boostrap spinners

Executing two AJAX requests simultaneously with Django, AJAX, and jQuery in a single event

The Jquery Load() function is causing [object object] to be returned instead of the element ID value when retrieving it

Develop a custom JavaScript code block in Selenium WebDriver using Java

Why does trying to package a Windows app on OSX prompt a request for Wine installation?

Tips for swapping out a new line character in JavaScript

Does Typescript not provide typecasting for webviews?

Guide to utilizing element reference with material UI components in Angular

Eliminating gaps between elements