Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

How to scroll the element belong to a group?

ericisa

New Coder
when the mouse is on top of the blue box, how to scroll the one?
It is too hard to describe as word, here is what I mean:
Note: I need to change the background color when mouse hover

2023-02-12-19-32-21.png
 
Does each line of 1's need to be in it's own <div> element?
If not, you could put all of those in a <p> element (or a <div>) like this:
HTML:
<div class="msg">mouse on me and scroll, how to get onesss to scroll?</div>
<p id="scroll-me">
  1
  <br>
  11
  <br>
  111
  <br>
  1111
  <!-- etc. -->
</p>
CSS:
#scroll-me {
  height: 100px;
  overflow-y: scroll;
}

Then you can scroll it like this with JavaScript:
JavaScript:
let y = 0;

document.querySelector(".msg").addEventListener("mouseover", () => {
  scroll = setInterval(() => {
    document.querySelector("#scroll-me").scroll(0, y);
    y++;
  }, 50);
})

document.querySelector(".msg").addEventListener("mouseout", () => {
  clearInterval(scroll);
})
 
Does each line of 1's need to be in it's own <div> element?
If not, you could put all of those in a <p> element (or a <div>) like this:
HTML:
<div class="msg">mouse on me and scroll, how to get onesss to scroll?</div>
<p id="scroll-me">
  1
  <br>
  11
  <br>
  111
  <br>
  1111
  <!-- etc. -->
</p>
CSS:
#scroll-me {
  height: 100px;
  overflow-y: scroll;
}

Then you can scroll it like this with JavaScript:
JavaScript:
let y = 0;

document.querySelector(".msg").addEventListener("mouseover", () => {
  scroll = setInterval(() => {
    document.querySelector("#scroll-me").scroll(0, y);
    y++;
  }, 50);
})

document.querySelector(".msg").addEventListener("mouseout", () => {
  clearInterval(scroll);
})
I am hoping for a clever trick using pure css, is it possible without involving using js?
 
I am hoping for a clever trick using pure css, is it possible without involving using js?
You are not the first to ask for a "pure css" solution for something. As always I wonder why people seem averse to use JavaScript and the DOM ? Is there a technical reason (permissions, security, whatever ?) or just personal preference ? Personally I find JS easier to learn than CSS with its zillions of different rules and selectors - it's one huge bag of tricks.
 
You are not the first to ask for a "pure css" solution for something. As always I wonder why people seem averse to use JavaScript and the DOM ? Is there a technical reason (permissions, security, whatever ?) or just personal preference ? Personally I find JS easier to learn than CSS with its zillions of different rules and selectors - it's one huge bag of tricks.
performance and size reason
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom